深入理解JavaScript中document.write在页面加载后的行为

document.write在页面加载期间的行为

作为初学者，我将这一学习笔记记录下来。该解答源自百度搜索结果，此处进行转载整理。

以下内容旨在解答一个常见问题：当页面加载完成后调用document.write，为何会导致整个文档被覆盖。

提示中提到的“HTML输出中”，特指页面正在加载渲染的阶段。

 
<html>
<head></head>
<body>
<script type="text/javascript">document.write("<p>Hello</p>");</script>
</body>
</html>

当页面加载结束时，浏览器会在页面上显示“Hello”。此时查看网页源代码，内容与上述代码一致。

页面加载后调用document.write的覆盖效应

然而，如果页面已经加载完毕，此时再使用document.write，将会覆盖整个文档内容。

 
<html>
<head></head>
<body>
<script type="text/javascript">
// 当点击鼠标时调用 document.write
document.onclick = function() {
document.write("<span>Javascript</span>");
}; 
</script>
</body>
</html>

由于鼠标点击事件发生在页面加载完成之后，执行document.write会导致整个页面被替换为<span>Javascript</span>。此时再次查看网页源代码，将只能看到<span>Javascript</span>这一部分。