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

解释 JavaScript 中 textContent、innerText 和 innerHTML 的区别。

DOM操作 中等 JavaScript DOM 文本内容

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 库)。