document.write在文档加载后的使用

本文代码部分,引用了http://blog.csdn.net/zhengqiqiqinqin/article/details/8916459的内容

在学习document.write函数时,见到了这样一句话:“您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。”

于是问题来了

怎样的情况算是文档加载后?

查阅资料后说,比如你将document.write写在一个函数中,这时,就是在文档加载后使用了该方法,会导致文档上所有内容被清空,只留下document.write中的内容。比如这段代码:

<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>


<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56}; 


for (x in person)
{
document.write(x+" ");   //注意此处:这样会覆盖掉下面的
 //document.getElementById("demo").innerHTML=txt;可以删除document.write(x+" "); 这句话,然后

//看看效果就明白了
alert("x= "+x);
txt=txt + person[x];
}


document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

于是。。。问题又来了。。。。

为什么将该方法嵌套在函数中,就相当于文档加载后

明明这段代码是写在body标签中啊,不是应该在加载时就执行了函数中的内容嘛。通过控制台调试,过了一遍代码执行流程,我发现,若直接将document.write写在<script>标签中,而非嵌套在函数中,则在文档加载完成前会运行该代码,可若是将document.write嵌套在函数中,则在文档加载完成前,只会声明该函数,而不会执行函数内的代码,具体函数内代码的执行,是等到文档加载完成后的。故,将document.write就会覆盖整个文档。

为什么文档加载后使用该方法,会覆盖整个文档

是这样的,我们加载文档时,相当于打开了一个document对象,并对这个对象执行各种写操作,而文档加载完成后,该对象就会关闭。我们若在文档加载完成后使用该方法,则是在关闭document对象后又一次打开,这次打开,便会覆盖上一次打开所写的页面内容,重新更新document对象。

你可能感兴趣的:(document.write在文档加载后的使用)