今天主要讲的时
document.write()
基本语法:
write(...text: string[])
换个说法是
document.write(exp1,exp2,exp3,....);
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
document.write("<div>111</div>","<div>222</div>")
</script>
</body>
</html>
支持输入多个字符串参数(其他类型会转为字符串格式输出);
用法还是相对比较简单，但是在使用的过程中，我会发现某些特定的情况下，使用document.write()向文档中写入内容时，document.write()中的内容会将文档中的原本内容给覆盖掉，于是我决定深入测试测试探讨探讨这是怎么回事
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>document</title>
<style>
padding: 0;
margin: 0;
.demo {
padding: 25px;
border: 1px dashed grey;
text-align: center;
</style>
</head>
<div class="demo">
<button onclick="test()"> 点击此按钮执行(执行调用document.write的操作)</button>
</div>
<p style="text-align: center">页面初始界面情况</p>
</body>
<script>
function test(){
document.write("<p style="text-align: center">点击按钮时执行的后显示的页面内容</p>");
</script>
</html>
点击之后发现按钮消失了，原来页面的内容也消失了，被document.write写入内容所替代，这是为啥？
document.write("<p style="text-align: center">点击按钮时执行的后显示的页面内容</p>");
观察发现前后两个document.write的操作
第一个document.write的操作直接和原来内容显示在界面上
第二个document.write的操作被button调用覆盖了原先内容
为什么会出现两种不同的情况呢？
首先，介绍一个概念，文档流
文档流：元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。
页面第一次打开时，浏览器会自上而下读取页面内容（第一次页面内容以及js里默认执行的document.write内容），这时候文档流没有关闭。document.write()方法中的内容会拼接到文档流中产生刚开始的界面显示的情况。之后继续加载时事件定义，文档流关闭。
<div class="demo">
<button onclick="test()"> 点击此按钮执行(执行调用document.write的操作)</button>
</div>
<p style="text-align: center;margin-bottom: 30px;">页面初始界面情况</p>
</body>
<script>
document.write("<p style="text-align: center">第一次加载执行的内容</p>");
</script>
被button点击触发事件之后执行，执行对应的函数内容时，由于页面初始的文档流已经关闭，所以document.write() 会调用document.open()创建一个新的文档流，并将document.write()中的内容写入到新的文档流中，这样新的文档流就会覆盖原本已加载的文档流。
function test(){
document.write("<p style="text-align: center">点击按钮时执行的后显示的页面内容</p>");
总结内容：
document.write()执行时如果文档流关闭，会调用document.open()创建一个新的文档流，这时候会覆盖原来的内容，一般这种事件情况下，通常使用document.append来添加内容从而不会创建新的文档流