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里面写就不一样,而是调用的时机,要明确什么时候文档会重新加载。
明确覆盖的原理后,主要在于是否会重新加载文档。重新加载文档的时机是什么:调用函数,或许还有其他。