纵横DOM Text：textContent 和 innerText的微妙差异

文本操纵：Node.textContent 和 Element.innerText 之间的细微差别

当你需要处理 DOM 元素中的文本内容时，有两个关键属性可以使用：Node.textContent 和 Element.innerText。乍看之下，它们似乎有着相同的功能，但实际上，它们之间有一些微妙却至关重要的区别。

Node.textContent：文本和元素节点

Node.textContent 适用于任何类型的节点，包括文本节点和元素节点。文本节点是 DOM 中最基本的文本容器，只包含文本数据。另一方面，元素节点可以包含文本节点和其他元素节点，形成复杂的文档结构。

当你获取文本节点的 textContent 时，你会获得节点中包含的纯粹文本内容。当获取元素节点的 textContent 时，你会获得该元素及其所有子元素的文本内容。

Element.innerText：仅限元素节点

Element.innerText 属性专用于元素节点。它不会考虑子元素的文本内容。

当你获取元素节点的 innerText 时，你会获得该元素包含的纯粹文本内容，但不包括子元素的文本内容。

处理 HTML 和脚本

Node.textContent 将 HTML 标记和脚本视为文本内容的一部分，而 Element.innerText 则会忽略它们。

这意味着，当你获取元素节点的 textContent 时，你将获得所有内容，包括 HTML 标记和脚本。另一方面，Element.innerText 只会返回纯粹的文本内容，不包括 HTML 标记和脚本。

代码示例

下面的代码片段演示了 Node.textContent 和 Element.innerText 的区别：

<div id="container">
  <p>Hello, world!</p>
  <script>alert('Hello, world!')</script>
</div>

// 获取 div 元素的 textContent
const divTextContent = document.getElementById('container').textContent;

// 获取 div 元素的 innerText
const divInnerText = document.getElementById('container').innerText;

console.log('textContent:', divTextContent);
console.log('innerText:', divInnerText);

输出：

textContent: Hello, world!
<script>alert('Hello, world!')</script>
innerText: Hello, world!

如你所见，Node.textContent 包含了所有内容，包括脚本，而 Element.innerText 只包含了文本。

何时使用哪个

大多数情况下，你应该使用 Node.textContent 来获取或设置文本内容。Element.innerText 只能用于元素节点，并且不会包括子元素的文本内容。

如果你需要获取或设置元素节点的纯粹文本内容，而不包括 HTML 标记和脚本，那么你可以使用 Element.innerText。

结论

Node.textContent 和 Element.innerText 都是用于操作文本内容的强大属性。通过了解它们之间的区别，你可以根据特定需要做出明智的选择。

常见问题解答

1. 哪种属性更适合获取文本内容？
   对于大多数情况，建议使用 Node.textContent，因为它更通用。

2. 哪种属性更适合设置文本内容？
   同样，对于大多数情况，建议使用 Node.textContent。

3. 为什么 Element.innerText 会忽略 HTML 标记和脚本？
   Element.innerText 专注于文本内容，因此它会忽略 HTML 标记和脚本，将其视为非文本内容。

4. 何时使用 Element.innerText 比 Node.textContent 更合适？
   当你需要获取或设置元素节点的纯粹文本内容时，例如用于搜索或比较目的。

5. 如何处理 HTML 标记和脚本中的文本内容？
   如果你需要处理 HTML 标记和脚本中的文本内容，则必须使用 Node.textContent 并相应地处理它们。