document.write vs document.getElementById

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

document.write：

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

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

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

 <!DOCTYPE HTML>

 <html>

 <head>

 </head>

 <body>

     <h1>Head</h1>

     <script>

         document.write('<p>hello document</p>');

     </script>

     <h2>Tail</h2>

 </body>

 </html>

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

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 标签。

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

既然 document.write 可以写入 p 并被浏览器解析，那么自然地也可以写入 script 标签。

<script>

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

</script>

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

 Head

 ');

 Tail

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

 <script>

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

 </script>

 ');

插入文本中的 </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)

方法：