textContent、innerText 和 innerHTML 的区别是什么？

textContent、innerText 和 innerHTML 都是 JavaScript 中用于操作 DOM 元素内容的属性，但它们在行为、性能和安全性上有显著差异。

1. textContent

• 定义：获取或设置元素及其所有子节点的纯文本内容，忽略 HTML 标签。
• 特点：
  • 返回所有文本节点内容（包括 <script> 和 <style> 中的文本）。
  • 不解析 HTML，因此安全且高效（不会触发重排）。
  • 跨浏览器兼容性好。
• 示例：

  const div = document.querySelector('div');
  div.textContent = 'Hello World'; // 设置纯文本
  console.log(div.textContent); // 输出 "Hello World"
  

2. innerText

• 定义：获取或设置元素的可见文本内容，受 CSS 样式影响。
• 特点：
  • 只返回用户可见的文本（隐藏元素如 display: none 的文本会被忽略）。
  • 会触发浏览器的重排（reflow），因为需要计算布局，性能较差。
  • 不是标准属性，但现代浏览器广泛支持。
• 示例：

  div.innerText = 'Visible Text'; // 设置可见文本
  console.log(div.innerText); // 输出当前可见文本
  

3. innerHTML

• 定义：获取或设置元素的 HTML 内容，包括标签。
• 特点：
  • 解析并渲染 HTML 字符串，允许插入动态内容。
  • 存在 XSS（跨站脚本）安全风险，因为可能执行恶意代码。
  • 操作成本高，频繁使用可能影响性能。
• 示例：

  div.innerHTML = '<b>Bold Text</b>'; // 设置 HTML
  console.log(div.innerHTML); // 输出 "<b>Bold Text</b>"
  

关键区别总结

属性	内容类型	是否解析 HTML	性能	安全性	可见性依赖
textContent	纯文本	否	高（无重排）	高	无
innerText	可见文本	否	低（有重排）	高	是（CSS）
innerHTML	HTML 字符串	是	中	低（XSS风险）	无

使用建议

• 优先使用 textContent 处理纯文本（高效安全）。
• 避免 innerText 在性能敏感场景（如循环）。
• 谨慎使用 innerHTML，必要时对输入进行转义（例如用 textContent 或 DOMPurify 库）。