DOM 操作文本节点：innerHTML、innerText、textContent 的区别与最佳实践

在前端开发中，操作 DOM 元素的文本内容是非常常见的需求。例如动态更新页面文字、渲染接口返回的数据，或者修改组件中的内容。JavaScript 为开发者提供了三种常用属性：innerHTML、innerText 和 textContent。虽然它们都能读取或修改元素内容，但在行为、性能以及安全性方面存在明显区别。

理解这些差异，对于编写高质量、可维护且安全的前端代码非常重要。

innerHTML：操作 HTML 结构

innerHTML 是最常见的 DOM 内容操作属性，它可以读取或设置元素内部的 HTML 结构。当通过该属性设置内容时，浏览器会把字符串解析为 HTML，并生成对应的 DOM 节点。

例如：

const el = document.getElementById("demo");
el.innerHTML = "<strong>Hello World</strong>";

在这种情况下，浏览器会创建一个 <strong> 元素并渲染为加粗文本。

innerHTML 的优势在于灵活性很高，可以一次性插入复杂的 HTML 结构，因此在动态渲染模板或组件时经常使用。不过它也存在两个明显问题：

• 首先是 安全风险。如果插入的内容来自用户输入或不可信数据源，就可能触发 XSS（跨站脚本攻击）。因为浏览器会直接解析并执行其中的 HTML 或脚本代码。
• 其次是 性能问题。每次设置 innerHTML，浏览器都需要重新解析 HTML 并重建部分 DOM 结构，因此在频繁更新内容时效率较低。

因此在现代开发中，innerHTML 更适合用于插入可信的 HTML 片段，例如模板渲染、组件拼接等场景。

innerText：获取可见文本

innerText 主要用于获取或设置 页面上实际可见的文本内容。它不会解析 HTML 标签，而是只处理文本部分。

例如：

el.innerText = "<b>Hello</b>";

页面最终显示的是<b>Hello</b>而不是加粗的文字。

innerText 的一个重要特点是 会受到 CSS 样式影响。例如：

• display: none 的元素不会被读取
• 文本布局会按照浏览器渲染后的结果返回

因此 innerText 更接近用户在页面上看到的内容。但由于它需要考虑布局和样式，浏览器在读取 innerText 时可能触发 回流（reflow），在某些情况下会带来额外的性能开销。

因此，innerText 通常用于：

• 获取页面实际显示的文本
• 与用户界面交互相关的文本处理

textContent：纯文本操作

textContent 是现代前端开发中最推荐使用的文本操作方式。它返回元素及其所有子节点的 纯文本内容，不会解析 HTML 标签。

例如：

el.textContent = "<b>Hello</b>";

• 设置纯文本内容
• 渲染接口返回的数据
• 安全地显示用户输入

三者核心差异总结

从开发实践来看，三者的核心区别主要体现在三个方面：

1. 是否解析 HTML

• innerHTML：会解析 HTML 标签
• innerText：只处理文本
• textContent：只处理文本

2. 是否受 CSS 影响

• innerHTML：不受 CSS 影响
• innerText：只返回可见文本
• textContent：返回全部文本（包括隐藏内容）

3. 性能和安全

• innerHTML：解析 HTML，性能较低，存在 XSS 风险
• innerText：可能触发布局计算
• textContent：性能最好，安全性更高

实际开发中的最佳实践

在现代前端开发中，一般遵循以下原则：

• 优先使用 textContent：如果只是更新文本内容，这是最安全、最快的方式，也是当前推荐做法。
• 在需要 HTML 结构时使用 innerHTML：例如渲染模板、插入组件或富文本内容，但必须确保数据来源是可信的。
• 需要获取页面可见文本时使用 innerText：例如读取用户看到的内容或做 UI 文本处理。

简单来说可以记住一个经验法则：文本用 textContent，HTML 用 innerHTML，可见文本用 innerText。

总结

innerHTML、innerText 和 textContent 是前端开发中最基础却最容易混淆的三个 DOM 属性。它们的区别不仅体现在 HTML 解析方式，还涉及性能、CSS 渲染和安全问题。

在现代 Web 开发中，大多数情况下推荐优先使用 textContent 来操作文本，这不仅可以提升性能，也能有效避免潜在的 XSS 风险。只有在确实需要 HTML 结构时，才使用 innerHTML。合理选择这三种方式，可以让你的 DOM 操作更加安全、高效且易于维护。