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

最新推荐文章于 2020-06-19 19:32:39 发布

KSH_Wu

最新推荐文章于 2020-06-19 19:32:39 发布

阅读量2k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/KSH_Wu/article/details/53106115

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一开始在学习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 οnclick="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 οnclick="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 οnclick="myFunction()">点击按钮看看我今天锻炼了啥</button>
</p>
</body>
</html></span>

结果：

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

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

KSH_Wu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web开发JS学习（二）关于document.write会覆盖文档流的理解

一开始在学习JS的时候看到说：其实一开始并不是很理解这段话的意思，然后通过一些实例自己也改变了document.write的位置，发现结果还是会覆盖原文档流，下面通过实例看我的心路历程：My First Web PageMy First Paragraph.点击这里function myFunction(){document.write("会覆盖原文档流吗
复制链接

扫一扫