在 JavaScript 中操作 DOM 是实现动态页面的关键。document.write、innerHTML 和 innerText 是三种常用的方法但它们的用途、性能和安全机制截然不同。本文将深入解析三者的区别助你避免常见陷阱写出更高效的代码。1. document.write简单但危险的“原始方法”作用与语法功能直接向 HTML 文档流中插入内容。语法document.write(content)示例html复制下载运行scriptdocument.write(h1Hello World/h1);/script核心特点加载时机敏感仅在页面初始加载阶段有效。若在 DOM 加载完成后调用如点击事件中会覆盖整个页面阻塞渲染同步写入内容会阻塞页面解析影响性能。适用场景旧式脚本或快速原型开发不推荐生产环境使用。2. innerHTML强大的“内容构造器”作用与语法功能读取或设置元素的 HTML 结构包括标签和文本。语法element.innerHTML divNew Content/div;示例javascript复制下载document.getElementById(container).innerHTML p动态内容/p;核心特点解析 HTML 标签插入的字符串会被解析为 DOM 节点例如 br 会变成换行。高风险操作直接注入未过滤的字符串会导致 XSS 攻击如 img srcx onerrorstealCookies()。性能损耗频繁修改会触发重排Reflow和重绘Repaint大范围更新时建议用 DocumentFragment。适用场景动态插入带格式的内容如富文本渲染。3. innerText安全的“纯文本处理器”作用与语法功能操作元素的纯文本内容忽略 HTML 标签。语法element.innerText Plain Text;示例javascript复制下载document.querySelector(div).innerText script不会被解析/script;核心特点自动转义 HTML输入内容会被视为纯文本例如 转义为 lt;天然防 XSS。关注视觉呈现返回的文本会考虑 CSS 样式如 display: none 的元素内容不会被包含。性能优化修改时仅触发文本节点的更新比重排整个 DOM 更高效。适用场景用户输入展示如评论、消息框、无需格式的文本更新。三者的关键对比特性 document.write innerHTML innerText操作目标 整个文档流 指定元素的 HTML 内容 指定元素的纯文本内容解析 HTML ✅ ✅作为标签解析 ❌转义为纯文本XSS 风险 ⚠️ 高危动态注入 ⚠️ 高危未过滤时 ✅ 安全自动转义加载时机限制 ❗️ 仅页面加载中有效 无限制 无限制性能影响 ⚠️ 阻塞渲染 ⚠️ 可能触发重排 ✅ 较轻量适用场景 传统脚本 动态插入带标签的内容 安全展示用户输入最佳实践与注意事项弃用 document.write现代前端开发中应避免使用除非特殊场景因其破坏性和阻塞特性。安全使用 innerHTML永远对用户输入进行 XSS 过滤如使用 DOMPurify 库javascript复制下载const cleanHTML DOMPurify.sanitize(userInput);element.innerHTML cleanHTML;首选 innerText 展示文本当内容无需 HTML 标签时innerText 是更安全、更高效的选择。性能优化批量更新 DOM 时使用 DocumentFragment 或 textContent类似 innerText但不考虑样式。总结document.write即将退役的“老将”危险且局限。innerHTML功能强大的“双刃剑”需警惕 XSS。innerText安全高效的“文本卫士”适合用户内容展示。选择合适的工具才能在安全与性能的平衡中游刃有余