js 中 document.write()会不会清空原来文档内容？

[cstome]

在 console 输入 document.write()会清空原来的内容，但再次执行的时候会在原来的基础上追加。

这是为什么啊？

[FrankFang128]

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write#Notes

[YuJianrong]

document.write()只有在 javascript 首次加载运行的时候执行，如果页面已经加载完毕，执行这个的效果是抹掉整个页面换成 write 的字符串。毕竟你都不知道 write 到什么位置去。
另外带 async 属性的 script 也不能用，用了没有效果。

[FrankFang128]

@YuJianrong 按照 MDN 的说话， write 方法必须在一个 open 过的文档里执行，如果没有 open 过，就会帮你 open 。 open 会把当前文档清空。
document.open()
document.write(1)
document.write(2)
document.close()
document.write(3)
在控制台试试。

不要看 W3Schools 了。

[FrankFang128]

不看 MDN ，谁能猜到有 close 一说。

[FrankFang128]

好吧 W3Schools 也介绍 close 了，不错哦。

[cstome]

@FrankFang128 这个我也试过，就是不理解为什么会这样。 MDN 也只是说没有 document.open 就会自动调用。

还有个疑问，页面加载的过程中是不是相当于执行了 document.open()和 document.close()?然后在页面内嵌 document.write()就不会清空内容，后期页面加载后调用就会？

[FrankFang128]

https://80post.com/reader/posts/156
当你打开一个页面，浏览器会

1. （前面做了很多事情，与本文无关，省略）

2. 调用 document.open() 打开文档

3. document.write(...) 将下载到的网页内容写入文档

4. 所有内容写完了，就调用 document.close()

5. 触发 dom ready 事件（ DOMContentReady)



所以你如果在第 4 步之前 document.write(1) 那么你就直接追加内容到当前位置，

如果你在第 4 步之后 document.write()，那么由于 document 已经 close 了，所以必须重新 document.open() 来打开文档，这一打开，内容就被清空了。



不信你可以这样验证一下：

1. 打开 baidu.com 等页面加载完

2. 在控制台运行 document.write(1)，会看到页面清空，只有一个 1

3. 再次运行 document.write(1)，会发现页面没有清空， 1 变成了 11 ，因为追加了一个 1

4. 运行 document.close()，这时文档就关闭了。

5. 再次运行 document.write(1)，你会发现文档又清空了，变成了 1 。



完

[PythonAnswer]

楼上牛逼，完了。

[beilun]

@FrankFang128 涨见识了 2333

[wilddog]

@FrankFang128 介绍的很清楚！