JavaScript 中document.write详解
document.write()是 JavaScript 中一个古老且原始的 DOM 操作方法，用于直接向文档流中写入 HTML 内容或文本。它属于早期 DOM Level 0 的特性，现在已被视为不推荐使用的方法。
基本语法
document.write(markup);markup：字符串，可以是纯文本、HTML 标签、脚本等。- 可以调用多次，每次写入都会追加到当前文档流。
示例
<!DOCTYPEhtml><html><head><title>document.write 示例</title></head><body><script>document.write("<h1>欢迎来到我的网站！</h1>");document.write("<p>这是通过 document.write 写入的内容。</p>");document.write("<script>alert('Hello!')<\/script>");// 注意转义</script></script></body></html>页面加载时会直接输出：
<h1>欢迎来到我的网站！</h1><p>这是通过 document.write 写入的内容。</p>并弹出 alert。
关键特性与行为
在页面加载阶段（文档流开放时）使用：
- 如果在 HTML 解析过程中调用（如在
<script>中直接调用），它会追加内容到当前文档流。 - 这是它最“正常”的使用场景。
- 如果在 HTML 解析过程中调用（如在
在页面加载完成后（文档流关闭后）使用：
- 一旦文档加载完成（
load事件触发后），再次调用document.write()会隐式调用document.open()。 - 这会导致清空整个当前页面（包括所有内容、脚本、样式），然后重新开始写入新内容。
- 这是一个破坏性操作，极易导致页面空白或丢失数据。
危险示例：
window.onload=function(){document.write("太晚了！页面被清空了。");};// 结果：整个页面只剩下这句话，原有内容全没了！- 一旦文档加载完成（
性能问题：
document.write是同步阻塞的，会暂停页面解析和渲染，直到写入完成。- 大量使用会严重影响页面加载速度。
安全性问题：
- 直接写入用户输入内容容易导致XSS 跨站脚本攻击。
document.write(userInput);// 如果 userInput 包含 <script>恶意代码</script>，直接执行！
为什么现在几乎不用document.write？
| 问题 | 说明 |
|---|---|
| 破坏性行为 | 页面加载后调用会清空整个页面 |
| 阻塞渲染 | 同步操作，拖慢页面加载 |
| 不符合现代开发规范 | 违反内容与行为分离原则 |
| 安全性差 | 易引发 XSS |
| 已被主流框架抛弃 | React、Vue、Angular 等都不使用这种方式操作 DOM |
推荐的现代替代方案
| 需求 | 推荐方法 |
|---|---|
| 动态插入 HTML 内容 | element.innerHTML = '内容' |
| 更安全地插入内容 | element.textContent = '内容'（纯文本） |
| 创建新元素 | document.createElement()+appendChild() |
| 插入到特定位置 | insertAdjacentHTML() |
| 响应式更新内容 | 使用现代框架（React、Vue 等） |
最佳实践示例：
// 代替 document.writeconstcontainer=document.getElementById('output');container.innerHTML="<h1>欢迎来到我的网站！</h1><p>现代方式插入内容</p>";// 或更安全的方式container.insertAdjacentHTML('beforeend','<p>新内容</p>');特殊注意：广告脚本中的使用
你可能还在一些老旧广告代码中看到：
<script>document.write('<script src="http://ads.example.com/ad.js"></script>');</script>这是历史遗留问题，现代广告联盟已基本放弃这种方式，改用异步加载。
总结
| 项目 | 评价 |
|---|---|
| 功能 | 强大（可直接写入任意内容） |
| 易用性 | 高（语法简单） |
| 安全性 | 低（易 XSS） |
| 性能 | 差（阻塞渲染） |
| 现代兼容性 | 差（不推荐） |
| 是否应继续使用 | 强烈不推荐，仅用于学习或极特殊场景 |
结论：document.write是 JavaScript 历史的产物，除非你在维护非常老的代码或进行教学演示，否则永远不要在生产环境中使用它。使用现代 DOM 操作方法才是正确选择。
