当前位置：首页 > news >正文

document.write详解

news 2026/5/11 22:56:13

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>中直接调用），它会追加内容到当前文档流。
- 这是它最“正常”的使用场景。
在页面加载完成后（文档流关闭后）使用：
- 一旦文档加载完成（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 等）

特殊注意：广告脚本中的使用

你可能还在一些老旧广告代码中看到：

<script>document.write('<script src="http://ads.example.com/ad.js"></script>');</script>

这是历史遗留问题，现代广告联盟已基本放弃这种方式，改用异步加载。

总结

项目	评价
功能	强大（可直接写入任意内容）
易用性	高（语法简单）
安全性	低（易 XSS）
性能	差（阻塞渲染）
现代兼容性	差（不推荐）
是否应继续使用	强烈不推荐，仅用于学习或极特殊场景