【小白】javascript中的“文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖”

document.write已经遇到过好几次了，还是得弄弄清楚。

W3cschool上面有一道练习题，如下（图片1）

结果输入的时候h1跟p段落全部被覆盖，只有语句“糟糕！文档消失了”

图片中出现的关键字“如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖”。

疑问1：document.write的工作原理是什么，为什么会覆盖

疑问2：什么叫做“文档已完成加载”

加载文档的时候就像是创建了document对象，可以向文件流写入东西，就像在script标签里面直接写一句

<script>

    document.write（“123”）;

</script>

那个document是一边加载一遍进行写操作，但是文档加载成功之后，这个document对象就会关闭了。

如果你这时你又重新加载了文档，比如说你调用了函数（在js中运行编写好程序后只是声明了有这个函数，但并没有调用，所以你一旦调用，就会重新加载文档），如下

<script>

   function  reUse（）{

     document.write（“123”）;

  }

</script>

就会新建一个document对象，它会覆盖你之前的内容。这跟你函数放的位置无关，无论是在其他输出语句的前后，还是说在head或body里面写就不一样，而是调用的时机，要明确什么时候文档会重新加载。

明确覆盖的原理后，主要在于是否会重新加载文档。重新加载文档的时机是什么：调用函数，或许还有其他。