前端textContent 和 innerText的详细区别

textContent 和 innerText 是两个常用的 DOM 属性，用于获取或设置元素的文本内容。然而，它们有一些重要的区别，特别是在性能和行为方面。下面是详细的解释：

1. textContent

textContent 属性用于获取或设置元素及其所有后代的文本内容。它会去除所有的 HTML 标签，只保留纯文本。

特点

• 纯文本：textContent 只会返回元素及其后代的纯文本内容，不会包含任何 HTML 标签。
• 性能：textContent 相对高效，因为它不会触发重排或重绘。它直接操作文本节点内容。
• 安全性：textContent 会自动转义文本中的 HTML 标签，防止 XSS 攻击。

示例

<div id="example">
    <p>Hello <span>World</span></p>
</div>
<script>
    const element = document.getElementById('example');
    console.log(element.textContent); // 输出: "Hello World"
    element.textContent = "New Content";
    console.log(element.innerHTML); // 输出: "New Content"
</script>

2. innerText

innerText 属性也用于获取或设置元素的文本内容，但它的行为与 textContent 有一些显著的不同。

特点

• 受样式影响：innerText 会考虑 CSS 样式，如 display: none 或 visibility: hidden。它只会返回可见的文本内容。
• 格式化：innerText 会保留文本的格式（如换行符）。
• 性能：innerText 可能触发重排（reflow）和重绘（repaint），因为它需要计算元素的可见性和样式。

示例

<div id="example">
    <p>Hello <span style="display: none;">Hidden</span> World</p>
</div>
<script>
    const element = document.getElementById('example');
    console.log(element.innerText); // 输出: "Hello World"
    element.innerText = "New Content";
    console.log(element.innerHTML); // 输出: "New Content"
</script>

为什么 innerText 可能触发重排？

innerText 可能触发重排的原因在于它需要计算元素的可见性和样式。具体来说：

1. 可见性计算：innerText 需要检查元素及其子元素的 CSS 样式，以确定哪些文本是可见的。这涉及到计算 display、visibility、opacity 等属性。
2. 格式化：innerText 会保留文本的格式（如换行符），这需要计算文本的布局。
3. 重排和重绘：由于 innerText 需要重新计算元素的布局和可见性，它可能会导致重排（重新计算元素的几何属性）和重绘（重新绘制元素）。

textContent 会触发重排吗？

textContent 通常不会触发重排。它直接操作 DOM 树中的文本节点，不需要计算元素的可见性或样式。因此，textContent 的性能通常优于 innerText，特别是在需要频繁更新文本内容的情况下。

总结

• textContent：用于获取或设置元素及其后代的纯文本内容，不会触发重排或重绘，性能更好。
• innerText：用于获取或设置元素的可见文本内容，会考虑 CSS 样式，可能触发重排和重绘。

在选择使用哪个属性时，应该根据具体需求和性能考虑进行选择。如果需要高性能的文本操作，textContent 通常是更好的选择；如果需要获取或设置可见的文本内容，innerText 则更为合适。