JavaScriptdocument.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DO
- 电脑硬件
- 2025-09-10 03:36:02
文章目录 **一、基本语法****二、核心功能**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）进行内容操作。
JavaScriptdocument.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DO由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JavaScriptdocument.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DO”
![[Linux入门]---git命令行的基本使用](/0pic/pp_57.jpg)
