textContent、innerText 和 innerHTML 的区别是什么?
解释 JavaScript 中 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 库)。