textContent 和 innerText 的区别

在使用 JavaScript 操作 DOM 时，我们可能会遇到 textContent 和 innerText 这两个属性。它们都可以用来获取或设置元素的文本内容，但是它们有什么区别呢？

textContent

textContent 属性返回元素及其后代元素的文本内容，不包含 HTML 标签。例如：

const element = document.querySelector('.example');
console.log(element.textContent); // 输出：This is some text.

上面代码中，假设 .example 元素包含如下 HTML 代码：

<div class="example">
  This is <strong>some</strong> text.
</div>

textContent 属性的返回值是 "This is some text."，不包含 <strong> 标签，而只包括文本内容。

innerText

innerText 属性与 textContent 相似，也返回元素及其后代元素的文本内容，但是不同的是：它会计算 CSS 样式，隐藏的文本或文本嵌套在其中的元素被排除在计算之外。例如：

const element = document.querySelector('.example');
console.log(element.innerText); // 输出：This is some text.

上面代码中，假设 .example 元素包含如下 HTML 代码：

<div class="example">
  This is <strong class="hidden">hidden</strong> some text.
</div>

.hidden 类定义了 display: none 的 CSS 样式，因此该元素及其文本内容被隐藏起来了。innerText 属性的返回值是 "This is some text."，不包括被隐藏的文本 "hidden"。

区别

因此，textContent 和 innerText 的区别可以总结如下：

• textContent 返回元素的文本内容，不包括 HTML 标签。
• innerText 返回元素的文本内容，但会计算 CSS 样式和隐藏的文本。

在实际应用中，我们需要根据具体情况来选择使用哪一个属性。如果只需要文本内容，不考虑样式和隐藏元素，则可以使用 textContent；如果需要考虑样式和隐藏元素，则可以使用 innerText。

注意： 这两个属性在某些浏览器中可能会有兼容性问题，建议在使用时进行兼容性检查。