【春节日更】小知识 — document.write会不会覆盖页面内容

今日分享小知识

document.write会不会覆盖页面内容

先看看示例代码，再看 write 的介绍

01

示例代码

首先，直接来看看下面的示例，判断 document.write 是否会覆盖页面上的内容

示例一：

<div>
    原来网页内容
</div>
<script type="text/javascript">
       document.write("新的内容");
</script>

示例二：

<div>
    原来网页内容
</div>
<script type="text/javascript">
   window.onload=function (){
       document.write("新的内容");
   }
</script>

示例三：

<div>
    原来网页内容
</div>
<button type="button" id="btnAddContent">添加</button>
<script type="text/javascript">
   var btn = document.getElementById("btnAddContent");
   btn.onclick=function (){
       document.write("新的内容");
   }
</script>

结果：

示例一，不覆盖

示例二，会覆盖

示例三，会覆盖

02

document.write 、

document.open的介绍

Document.write() 方法将一个文本字符串写入一个由 document.open() 打开的文档流（document stream）

注意: 因为 document.write 需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write，就会自动调用 document.open，这将清空该文档的内容,在document.open方法会有具体解释。

Document.open() 方法打开一个要写入的文档。

这将会有一些连带的影响。例如：

• 此时已注册到文档、文档中的节点或文档的window的所有事件监听器会被清除。
• 文档中的所有节点会被清除。

03

题目解析

在页面加载完成后(会自动关闭文档 —— document.close())，而 onload 与 onclick 事件在调用时，页面均已加完成，

所以，调用 document.write 时，会先调用 document.open 方法，而 open 方法会把文档中的所有结点清除，这就是 document.write 使页面内容被覆盖的原因

故：示例二，示例三均会被覆盖，示例一不被覆盖