JavaScript document.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）
文章目录
- **一、基本语法**
- **二、核心功能**
- 1. **在文档加载阶段写入**
- 2. **文档加载后调用会导致覆盖**
- **三、注意事项**
- 1. **覆盖风险**
- 2. **性能问题**
- 3. **XSS 漏洞**
- 4. **已关闭的文档流**
- **四、使用场景（不推荐，但需了解）**
- **五、现代替代方案**
- 1. **操作 DOM 元素**
- 2. **创建新元素**
- 3. **使用 `textContent` 防 XSS**
- **总结**
document.write() 是 JavaScript 中一个直接将内容写入 HTML 文档的早期方法。以下是其详细介绍：
一、基本语法
document.write(content);
- 参数：
content可以是字符串、HTML 标签或变量，如document.write("<h1>Hello</h1>")。
二、核心功能
1. 在文档加载阶段写入
当页面解析到 <script> 标签时，document.write() 会在当前位置插入内容：
<body>
<script>
document.write("<p>插入到 body 中的段落</p>");
</script>
</body>
输出效果：内容直接显示在 <script> 标签所在位置。
2. 文档加载后调用会导致覆盖
若在页面加载完成后（如通过按钮点击触发），使用 document.write() 会清空整个页面：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript练习</title>
</head>
<body>
<h1>原始页面内容</h1>
<button id="myButton">点击覆盖页面</button>
<script>
// 获取按钮元素
const button = document.getElementById("myButton");
// 绑定点击事件
button.onclick = () => {
document.write("页面已重置！"); // 点击后清空整个页面
};
</script>
</body>
</html>
三、注意事项
1. 覆盖风险
在异步代码或事件中调用时，内容会覆盖原有页面（触发 document.open()）。
2. 性能问题
频繁使用会阻塞页面渲染，影响性能。
3. XSS 漏洞
直接插入未过滤的用户输入可能导致安全风险：
// 避免直接插入用户输入！
document.write(userInput); // 可能被注入恶意脚本
4. 已关闭的文档流
如果文档已关闭（如异步脚本中），调用会报错：
// 延迟执行时文档已关闭，导致错误
setTimeout(() => document.write("错误！"), 1000);
四、使用场景（不推荐，但需了解）
- 快速测试：临时输出调试信息。
- 旧代码维护：兼容遗留系统。
- 动态脚本注入：某些广告脚本可能仍在使用。
五、现代替代方案
1. 操作 DOM 元素
// 插入内容到指定元素
document.getElementById("target").innerHTML = "<p>新内容</p>";
2. 创建新元素
const newElement = document.createElement("div");
newElement.textContent = "动态创建的内容";
document.body.appendChild(newElement);
3. 使用 textContent 防 XSS
// 安全插入纯文本
element.textContent = userInput;
总结
document.write() 因其覆盖风险和性能问题，已逐渐被现代 DOM 操作方法取代。建议优先使用 innerHTML、createElement 或框架（如 React/Vue）进行内容操作。