![09de8f773be4058b9703303b0583f9c2.png](https://i-blog.csdnimg.cn/blog_migrate/e22e0664f6b9abee0b28af16fe512b38.png)
相信很多初学JavaScript的小伙伴们都有用到document.write()
,
它的基本 作用:就是向文档中写入HTML表达式和JavaScript的代码。
基本语法:
document.write(exp1,exp2,exp3,....);
支持输入多个字符串参数(其他类型会转为字符串格式输出);
用法还是相对比较简单,但是很多同学在使用的过程中,就会发现某些特定的情况下,使用document.write()
向文档中写入内容时,document.write()
中的内容会将文档中的原本内容给覆盖掉,对于初学JS的朋友来说可能摸不着头脑,下面就针对这个问题,做下简单的探讨。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
* {
padding: 0;
margin: 0;
}
.demo {
padding: 25px;
border: 1px dashed grey;
}
</style>
</head>
<body>
<div class="demo">
<button> 点击此按钮执行 </button>
</div>
</body>
<script>
document.write("我是JS中加载执行的内容<br>");
</script>
<script>
var button = document.querySelector(".demo button");
button.onclick = function() {
document.write("点击按钮时执行的内容");
}
</script>
</html>
由以上代码可以发现一下两种情况:
(1) 当页面打开之后(页面加载完毕),”我是JS中加载执行的内容<br>”
此文本内容会正常的显示在 button按钮的下方.
(2) 当我们点击了button按钮之后,”点击按钮时执行的内容”
又会覆盖掉原来的文档内容,
为什么会出现这两种不同的情况呢?
这和页面中的文档流是否闭合有有一定的关系,接下来我们就针对这两种情况做一下介绍。
首先,了解文档流的同学都知道,页面第一次打开时,浏览器会自上而下读取页面内容,
<script>
document.write("我是JS中加载执行的内容<br>");
</script>
所以当页面加载到时,此时的文档流还没有关闭,所以document.write()
方法中的内容会拼接到文档流中也就是情况一的由来。
之后继续加载JS,为button按钮绑定了一个点击事件,此后页面加载完毕,文档流就闭合了。
<script>
var button = document.querySelector(".demo button");
button.onclick = function () {
document.write("点击按钮时执行的内容");
}
</script>
当我们点击button按钮时,执行对应的函数内容时,由于页面初始的文档流已经关闭,所以document.write()
会调用document.open()
创建一个新的文档流,并将document.write()
中的内容写入到新的文档流中,这样新的文档流就会覆盖原本已加载的文档流,也就是情况二的由来。
总结如下:
1. 页面加载时,浏览器默认创建的文档流自上而下会读取整个页面内容,此时document.write()
中的内容会直接写入到当前文档流中(注:此时document.write()
并不会触发document.open()
方法创建新的文档流)。
2. 页面加载完毕,文档流已经闭合,再使用document.write
则会先执行document.open()
创建一个新文档流,这个新文档流将会覆盖替换掉之前的文档流.
千锋HTML5学院:不使用var定义的变量zhuanlan.zhihu.com
![c75d2bb4e84f2fe75a53a1f912ee52e8.png](https://i-blog.csdnimg.cn/blog_migrate/63e858951ada75fed75d459bc543ccb8.png)
![01c5022dc2a4bb4fd333ff6863eeeac8.png](https://i-blog.csdnimg.cn/blog_migrate/010a76978dbd9bae28d1f2c771eb6d8e.png)
![9e259ce03ee65194c3ec3528a66d0752.png](https://i-blog.csdnimg.cn/blog_migrate/832b7802ee4b7f4e62a2926b664d9124.jpeg)
![fb55f5a312ea34df61d90f1d8001c0a5.png](https://i-blog.csdnimg.cn/blog_migrate/e4b0b172b6674201cfd8cfef7fc0bdc5.png)