JS 中 document.write() 的用法和隐藏的坑

柔光的暖阳◎ 2023-10-06 14:30 100阅读 0赞

> 相信很多初学JavaScript的小伙伴们都有用到 `document.write()`,  
> 它的基本 **作用**：就是向文档中写入HTML表达式和JavaScript的代码。

**基本语法：**

document.write(exp1,exp2,exp3,....);

支持输入多个字符串参数(其他类型会转为字符串格式输出);

用法还是相对比较简单，但是很多同学在使用的过程中，就会发现某些特定的情况下，使用`document.write()`向文档中写入内容时，`document.write()`中的内容会将文档中的原本内容给覆盖掉，对于初学JS的朋友来说可能摸不着头脑，下面就针对这个问题，做下简单的探讨。

代码如下：

<!DOCTYPE html>
    <html lang="en">
        <head>
    	<meta charset="UTF-8">
    	<title>document</title>
    	<style>
    	    * {
    	        padding: 0;
    		margin: 0;
    	    }
    	    .demo {
    	        padding: 25px;
    	        border: 1px dashed grey;
    	    }
    	</style>
        </head>
        <body>
    	<div class="demo">
    	    <button> 点击此按钮执行 </button>
    	</div>
        </body>
        <script>
    	document.write("我是JS中加载执行的内容<br>");
        </script>
        <script>
            var button = document.querySelector(".demo button");
    	button.onclick = function() {
    	    document.write("点击按钮时执行的内容");
    	}
        </script>
    </html>

**由以上代码可以发现一下两种情况：**

(1) 当页面打开之后(页面加载完毕)，`”我是JS中加载执行的内容<br>”`此文本内容会正常的显示在 button按钮的下方.

(2) 当我们点击了button按钮之后，`”点击按钮时执行的内容”` 又会覆盖掉原来的文档内容，

**为什么会出现这两种不同的情况呢？**

这和页面中的文档流是否闭合有有一定的关系，接下来我们就针对这两种情况做一下介绍。

首先，了解文档流的同学都知道，页面第一次打开时，浏览器会自上而下读取页面内容，

所以当页面加载到时，此时的文档流还没有关闭，所以`document.write()`方法中的内容会拼接到文档流中也就是情况一的由来。

之后继续加载JS，为button按钮绑定了一个点击事件，此后页面加载完毕，文档流就闭合了。

当我们点击button按钮时，执行对应的函数内容时，由于页面初始的文档流已经关闭，所以`document.write()` 会调用`document.open()`创建一个新的文档流，并将`document.write()`中的内容写入到新的文档流中，这样新的文档流就会覆盖原本已加载的文档流，也就是情况二的由来。

**总结如下：**

1. 页面加载时，浏览器默认创建的文档流自上而下会读取整个页面内容，此时`document.write()`中的内容会直接写入到当前文档流中(注：此时`document.write()`并不会触发`document.open()`方法创建新的文档流)。

2. 页面加载完毕，文档流已经闭合，再使用`document.write`则会先执行`document.open()`创建一个新文档流，这个新文档流将会覆盖替换掉之前的文档流.