web开发JS学习（二）关于document.write会覆盖文档流的理解

来源：互联网发布：20 sim软件下载编辑：程序博客网时间：2024/06/05 03:03

一开始在学习JS的时候看到说：

其实一开始并不是很理解这段话的意思，然后通过一些实例自己也改变了document.write的位置，发现结果还是会覆盖原文档流，下面通过实例看我的心路历程：

<span style="font-size:14px;color:#000000;"><!DOCTYPE html><html><body><script><h1>My First Web Page</h1><p>My First Paragraph.</p><button onclick="myFunction()">点击这里</button>function myFunction(){document.write("会覆盖原文档流吗？");}</script></body></html></span>

结果是覆盖的，说文档加载完之后再执行document.write会出现这种情况，那么我换一下位置呢，把这条语句放在文档前面看看：

<span style="font-size:14px;color:#000000;"><!DOCTYPE html><html><body><script>function myFunction(){document.write("会覆盖源文档流吗？");}</script><h1>My First Web Page</h1><p>My First Paragraph.</p><button onclick="myFunction()">点击这里</button></body></html></span>

结果还是会覆盖掉，那么也不是这个顺序的问题，后来看到这里引用了button标签，一开始不点击的时候页面应该显示的效果如下图：

，现在大概明白了，我们的document.write其实写入进去文档的位置其实是在咱们点击button之后的输出流里面，也正是上面那句话的意思，前面的文档流h1以及p标签里面的文档都已经加载完毕了，之后咱们进行的操作是点击button然后出现“会覆盖原文档流吗？”这段话，所以才会出现这种现象，咱们再看看正常的实例：

<span style="font-size:14px;color:#000000;"></DOCTYPE html><html><head>正常显示经过JS写入文档，而不会覆盖住原文档流的实例</head><body><p id="one">刚健身回来</p>            <span style="color:#FF0000;"> //通过id属性来写入文档</span><p id="two">写下博客玩玩</p><script>function myFunction(){<span style="color:#FF0000;">document.getElementById("one").innerHTML</span>="今天练了卧推";       <span style="background-color: rgb(51, 204, 0);"> <span style="color:#FF0000;">/*这条语句很重要，基本就是公式了，也体现出JS能对HTML内任意标签下的文档就行修改。*/</span></span>document.getElementById("two").innerHTML="还练了腿，目测明天要废";}</script><p><button onclick="myFunction()">点击按钮看看我今天锻炼了啥</button></p></body></html></span>

结果：

也就是说，如果是通过加入button这种在加载文档流之后才进行操作的标签时，千万不要用document.write这条语句。

这样应该就很好理解了吧，下次如果想写入文档，并且不想覆盖原文档流，就用上面的脚本写就行了，注释也解释的很清楚，都是套路。

0 0