标题看着有点奇怪, 不是写错了, 直接写 document.write 不合法, 搞半天, 发不出来, 一直提示 "输入的信息错误, 请重新提交", 233333, 鬼知道哪里信息有误. 最后试了发现标题的 document.write
如下代码:
- hello world!
- <script> document.write("2333"); </script>
- 255
输出如下图:
了解一下 document 对象:
1. 当浏览器载入 html 文档, 它就会成为 Document 对象 (也就是这个文档的高级管理员)
2.Document 对象是 HTML 文档的根节点
3.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
4. Document 对象是 Windows 对象的一部分, 可以通过 Windows.document 属性对其进行访问.
document.write(): 向文档写 HTML 表达式或 JavaScript 代码
下面来看看什么是文档加载后使用该方法, 内容被清空
- hello world!
- <script> document.write("2333"); </script > 确定
- 255
如下图动图:
下面是我个人的理解: HTML 代码在被执行的时候, 浏览器会自动调用 document.open() 打开一个新的文档流, 然后开始在这个文档流的基础上加载信息. 加载完毕后, 就会自动调用 document.close() 关闭该文档流. 上述代码的按钮被触发的时候, 原来一开始被加载时使用的文档流已经在文档加载完毕后自动被关闭了, 如果再执行 document.write(), 就会自动调用 document.open() 来创建一个新的文档流来写入信息. 两次加载的文档流并不是同一个. 因此就有被 "清空" 的现象.
但是注意: 如果 JS 脚本并不是被触发的, 是那种嵌入 HTML 文档中就能够直接被执行的, 那么就不会在原文档流被关闭之后执行, 他就能够使用到同一个文档流, 就不会有被 "清空" 的现象发生.
onclick 事件是在文档内容完全加载完毕再被执行事件处理函数, 当文档加载完毕了, 当前的文档流已经关闭了, 这时候事件被触发所执行的 document.write 会自动去调用 document.open() 函数穿件一个新的文档流, 并写入新的内容, 再通过浏览器展示, 这样就会覆盖原来的内容. 也就是当文档流没有关闭之前执行是不会被清空的. 文档流是由浏览器创建的, 没有办法手动关闭. 但是经过 document.open() 创建的文档流可以由 document.close() 关闭.
如下代码
- <script type="text/JavaScript">
- document.write("JavaScript");
- </script>
- Hello JavaScript
输出如下:
重点在于: 不要认为有 document.write(), 就会有 "清空" 的现象. 会不会被清空的关键在于 JS 执行输入流的顺序, 如果在文档加载完毕了再执行, 那么文档加载完毕就会把流给关闭了, 就要重新创建流, 内容会被清空, JS 执行输入流的时, 当前文档流执行过程只是暂时被中断, 依旧使用当前文档流先来执行 JS 脚本, 处理完毕后, 接着执行下面的内容. 等到初始的文档流被自动关闭的时候, JS 已经执行了. 于是就不会被 "清空".
来源: https://www.2cto.com/kf/201809/780367.html