JavaScript 中 document.write 详解
document.write() 是 JavaScript 中一个古老且原始的 DOM 操作方法，用于直接向文档流中写入 HTML 内容或文本。它属于早期 DOM Level 0 的特性，现在已被视为不推荐使用的方法。
基本语法
document.write(markup);markup：字符串，可以是纯文本、HTML 标签、脚本等。- 可以调用多次，每次写入都会追加到当前文档流。
示例
<!DOCTYPE html>
<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>中直接调用），它会追加内容到当前文档流。 - 这是它最“正常”的使用场景。
- 在页面加载完成后（文档流关闭后）使用：
- 一旦文档加载完成（
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.write
const container = 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 操作方法才是正确选择。
