JavaScript 提供了两个属性，可用于访问元素的文本内容：和 。在大多数情况下，这两者似乎是可以互换的。实际上，许多开发人员可以互换使用它们，却不知道两者之间存在重要差异。Node.textContentHTMLElement.innerText
相似 之 处
我认为在深入研究差异之前确定这两个属性的相似之处是有帮助的。这也将阐明它们在大多数情况下的使用方式。
假设你有一个 HTML 元素，包含一些文本：
<p id="greeting">Hi there! My name is <strong>Bubbles</strong>.</p>这两个属性都将返回元素的文本内容，包括任何子元素的文本内容。它们还将忽略元素内容中可能存在的任何 HTML 标记。而且，它们也可用于设置元素的文本内容。
const greeting = document.getElementById('greeting');
greeting.innerText; // "Hi there! My name is Bubbles."
greeting.textContent; // "Hi there! My name is Bubbles."
greeting.innerText = 'Hello!'; // <p id="greeting">Hello!</p>
greeting.textContent = 'Hi!'; // <p id="greeting">Hi!</p>差异
到目前为止，这两个属性似乎做了完全相同的事情。实际上，它们都提供了一些方便的功能，使它们非常有用。但是，当元素的内容稍微复杂一些时，它们开始表现出一些差异。
以以下 HTML 元素为例：
<div class="card">
<style>
p { color: red; }
strong { text-transform: uppercase; }
small { display: none; }
</style>
<p>Hi there!<br />My name is <strong>Bubbles</strong>.</p>
<small>And I'm a <strong>dog</strong>.</small>
</div>让我们看一下这两个属性中每个属性的输出，看看它们有何不同。
const card = document.querySelector('.card');
card.innerText;
/*
"Hi there!
My name is BUBBLES."
*/
card.textContent;
/*
"
p { color: red; }
strong { text-transform: uppercase; }
small { display: none; }
Hi there!My name is Bubbles.
And I'm a dog.
"
*/在这种情况下，情况就大不相同了，对吧？ 应该与用户在浏览器中看到的内容大致匹配。另一种考虑方式是，它的输出应该非常类似于用户在选择元素的内容并将其复制到剪贴板时将获得的结果。HTMLElement.innerText
根据这个定义，首先要注意的是隐藏元素被忽略。这适用于不呈现的元素，例如 和 ，也适用于使用 CSS 隐藏的元素。在此示例中，元素是隐藏的，因此它不包含在 的输出中。<style><script><small>HTMLElement.innerText
其次，输出归一化。这意味着所有空格都折叠成一个空格，所有换行符都替换为单个换行符。如果存在，则也会遵循标记，因此它们将替换为换行符。HTMLElement.innerText<br>
我想说的最后一点是将文本转换应用于元素的内容。在这种情况下，元素将转换为大写，因此 的输出反映了这一点。HTMLElement.innerText<strong>HTMLElement.innerText
另一方面，返回元素的确切文本内容，包括任何空格和换行符。然而，标签被剥离而没有任何替换。它还包括任何隐藏元素的文本内容，例如 和 和 不应用文本转换。Node.textContent<br><style><script>
性能
但是，等等！还有更多！虽然似乎是明智的选择，但它带有性能警告。为了弄清楚浏览器呈现的内容，必须考虑CSS，触发回流。这可能在计算上很昂贵，并且可能会无意中产生性能瓶颈。HTMLElement.innerText
在我看来，一个好的经验法则是尽可能选择纯文本元素。对于更复杂的元素，请尝试确定布局和用户交互如何影响它们。例如，仅呈现一次且从不更改的复杂元素将是 的用例，但您可以将输出存储在变量中并重复使用它。Node.textContentHTMLElement.innerText
结论
HTMLElement.innerText和 是两个非常相似的属性，可用于访问和操作元素的文本内容。但是，它们在某些重要方面有所不同，您应该了解这些差异以选择最适合您需求的一种。始终检查您的用例并考虑您选择的性能影响。Node.textContent