Saber 酱的抱枕

textContent 与 innerText 属性返回的都是纯文本，不会含有 HTML 标签。它们的主要区别在于：textContent 返回的是所有文本内容（忽略 HTML 标签本身），而且保持源代码里的格式。innerText 则会按照人眼所看到的格式返回。

对于代码里的 <br> 换行，由于 textContent 只管返回文本内容，而 <br> 是个标签，所以 textContent 会完全忽略它。

innerText 则会将 <br> 变成 \n，因为这符合人眼看到的效果。

虽然 textContent 不会把 <br> 返回为 \n，但不意味着它永远不会返回 \n。由于 textContent 会把文本内容原样返回，所以如果文本在源代码里本来就有换行（也就是本来就有 \n 文本），那么就会返回 \n。

举个例子，如果在页面上显示这样的文字：

1 1
2 2

如果源代码没有换行（\n）：

<p>1 1<br>2 2</p>

此时 textContent 不会返回 \n，结果是 '1 12 2'，没有体现出换行效果。这可能成为一个潜在的坑。

innerText 是按照渲染效果返回的（人眼看到的效果），所以会体现换行效果(\n)，结果是 '1 1\n2 2'。

如果源代码里有换行：

<p>1
 1<br>
2
 2</p>

textContent 会返回换行：'1\n 1\n2\n 2'，而 innerText 的结果和之前一样是 '1 1\n2 2'（因为人眼看到的效果没有变）。

另一个例子：对于下面的源代码：

<p>
    <span>1</span>
    <span>2</span>
</p>

innerText 返回 '1 2'，注意中间有个空格，因为渲染后的效果就是有个空格的。

textContent 返回 '\n 1\n 2\n'，包含了源代码里所有的换行符和空格，等于只是把 HTML 标签去掉了。

如果把源代码挨在一起：

<p><span>1</span><span>2</span></p>

innerText 返回 '12'，此时中间没有空格。

textContent 返回的也是 '12'。

总结：
虽然在简单的情况下它们的返回值是一样的（如 <p>123</p>），但在涉及子元素、源代码格式时就可能会不同。

所以如果你想获取到符合人眼直觉的文本，应该使用 innerText，虽然它的性能开销会大一些。

textContent 返回的结果是源代码里的格式，不一定等同于人眼看到的效果。

JavaScript 中 textContent 和 innerText 的区别