document.write
我们都很熟悉,document.write用于向document.open打开的文档流中写入内容。
但是document.write很可能会造成文档的重写
我们先来补充一些理论知识:
- 如果document.write向文档流中写入内容时,文档流没有打开。那么document.write会自动调用document.open打开文档流
- 如果在文档加载完毕后调用document.write,那么会导致重写(即文档中原来的内容会被全部清除掉)
- 如果在文档加载过程中调用document.write,那么写入的内容会被正常解析到文档中,而不会导致重写
下面展现一个重写的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
setTimeout(function(){
document.write('hello world!');
},3000)
</script>
</body>
</html>
三秒后,文档已经加载完毕了,因此会造成重写,因此div等标签将会被清除,最后页面中只留下hello world!
可见,页面中仅剩下了最基本的标签,其他内容全部被清除了