滨州网站建设电话百家号关键词排名
文章目录
- **一、基本语法**
- **二、核心功能**
- 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）进行内容操作。