textContent 与 innerText 属性返回的都是纯文本，不会含有 HTML 标签。它们的主要区别在于：textContent 返回的是所有文本内容（忽略 HTML 标签本身），而且保持源代码里的格式。innerText 则会按照人眼所看到的格式返回。
对于代码里的 <br> 换行，由于 textContent 只管返回文本内容，而 <br> 是个标签，所以 textContent 会完全忽略它。
innerText 则会将 <br> 变成 \n，因为这符合人眼看到的效果。
虽然 textContent 不会把 <br> 返回为 \n，但不意味着它永远不会返回 \n。由于 textContent 会把文本内容原样返回，所以如果文本在源代码里本来就有换行（也就是本来就有 \n 文本），那么就会返回 \n。
举个例子，如果在页面上显示这样的文字：
1 1
2 2如果源代码没有换行：
<p>1 1<br>2 2</p>textContent 此时不会返回 \n，结果是 '1 12 2'。我那么大一个换行呢？这就是个潜在的坑。
innerText 是按照渲染效果返回的（人眼看到的效果），所以会返回换行，结果是 '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 返回的结果是源代码里的格式，不一定等同于人眼看到的效果。
哇，原来有这个区别