document.write vs document.getElementById

时间 2019-11-13

标签 document.write document write document.getelementbyid getelementbyid 繁體版

原文原文链接

document.write：html

JavaScript中对document.open所开启的文档流(document stream操做的API方法，它可以直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会从新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将从新构建DOM并渲染新的页面。浏览器

一.写入文本（页面加载中能够写入，而不会出现重写页面问题）oop

利用document.write来写入脚本，先考虑以下代码：url

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 </head>
 5 <body>
 6     <h1>Head</h1>
 7     <script>
 8         document.write('<p>hello document</p>');
 9     </script>
10     <h2>Tail</h2>
11 </body>
12 </html>

这段在h1和h2之间内嵌一个脚本，使用document.write来写入一个p标签。刷新页面，能够看到最终的结果是：spa

Head

hello document

Tail

即要文本在脚本执行的位置被插入。这是由于，浏览器就解析HTML构建DOM的时候，若是遇到script就会暂停下来，解析script中的代码并执行，而后再继续解析剩余HTML。(阻塞进行的)此时再去浏览器中检测DOM的结构，会发现script与h2之间多了一个p，浏览器在解析完h1以后，碰到script并执行之，此时document.write将一段HTML代码写入到文档流中，script执行完毕后，浏览器会解析文档流中的字符串，对新添加的p标签进行解析。若是将渲染好的页面保存下来，不一样的浏览器会有不一样的结果。如Chrome和Firefox的作保存下来的页面文件中，script后面会增长p标签，而IE中则是维持原状。（这里指的是原有的HTML结构，不一样浏览器将页面保存会做不一样的处理，有些会增长一些不影响原有结构的标签或注释。这意味着，若是浏览器从新加载Chrome或Firefox中保存下来的页面文件，就会多出一个p标签。code

二.写入脚本(注意加转义符号)htm

既然document.write能够写入p并被浏览器解析，那么天然地也能够写入script标签。对象

<script>
    document.write('<script>alert("oops!!!")</script>');
</script>

将代码做出上面的改动，意图在利用document.write在页面中插入一段脚本。这段代码的本意是弹出一个窗口，阻塞浏览器对HTML的解析。浏览器下刷新页面，发现并无论用，取而代之的是显示出一个没有意料到的页面。blog

1 Head
2 
3 ');
4 Tail

去检查DOM树，就会发现，这段脚本被拦腰截断了！浏览器将它解析成如下代码：事件

1 <script>
2     document.write('<script>alert("oops!!!")
3 </script>
4 ');

插入文本中的</script>被当成了第一个script的闭合标签，所以这个段代码成了非法代码，由于document.write的调用书写不正确，缺乏右边的括号)。此时，你能够在console中看到相关的错误信息。(控制台)解决这个问题，咱们能够对插入文本中闭合的的标签进行轻微修改，对最后一个>进行转义，变成\>。此时再刷新一下页面，就能够看到预想中的结果。即页面中仅显示h1，弹窗阻塞了浏览器对HTML的解析，关闭弹窗后，浏览器继续对HTML的解析并完成对页面的渲染。再去看看DOM的结构，会发如今原有的script元素后面又多了一个新的<script>元素，其中所执行的代码就是咱们的alert("opps!!!")。

弊端

从某个角度说，document.write的实际功能确实很强，可以直接修改文档流，但它有不少弊端：

在非loading阶段调用document.write会清除已加载的页面；

document.write不可以在XHTML中使用；

嵌入script中的document.write不能给任意节点添加子节点，由于它是随着DOM的构建执行的；

利用document.write写入HTML字符串流并非一个好方法，它有违DOM操做的概念；

利用document.write添加script加载外部脚本时，浏览器的HTML解析会被script的加载所阻塞；

document.getElementById：

document.getElementById(" ") 获得的是一个对象，用 alert 显示获得的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 获得的才是具体的值！

document 对象

属性： title ; bgColor ; url; ( 使用： document.title)

方法：

focus:使得元素获得焦点并执行由 onfocus 事件指定的代码。

getElementById:获取对 ID 标签属性为指定值的第一个对象的引用。

getElementsByName:根据 NAME 标签属性的值获取对象的集合。

getElementsByTagName:获取基于指定元素名称的对象集合。