innerText和textContent之间的关键区别在Kelly Norton的博客文章中很好地概述了:innerText vs. textContent。下面是摘要:

innerText was non-standard, textContent was standardized earlier. innerText returns the visible text contained in a node, while textContent returns the full text. For example, on the following HTML <span>Hello <span style="display: none;">World</span></span>, innerText will return 'Hello', while textContent will return 'Hello World'. For a more complete list of differences, see the table at http://perfectionkills.com/the-poor-misunderstood-innerText/ (further reading at 'innerText' works in IE, but not in Firefox). As a result, innerText is much more performance-heavy: it requires layout information to return the result. innerText is defined only for HTMLElement objects, while textContent is defined for all Node objects.

一定要看看这个答案下面的信息评论。

textContent在IE8-中不可用，裸金属填充看起来像一个在指定节点的所有childNodes上使用nodeValue的递归函数:

function textContent(rootNode) {
  if ('textContent' in document.createTextNode(''))
    return rootNode.textContent;

  var childNodes = rootNode.childNodes,
      len = childNodes.length,
      result = '';
  
  for (var i = 0; i < len; i++) {
    if (childNodes[i].nodeType === 3)
      result += childNodes[i].nodeValue;
    else if (childNodes[i].nodeType === 1) 
      result += textContent(childNodes[i]);
  }

  return result;
}

innerText和textContent都是2016年标准化的。所有Node对象(包括纯文本节点)都有textContent，但只有HTMLElement对象有innerText。

虽然textContent适用于大多数浏览器，但不适用于IE8或更早版本。使用这个填充只在IE8上工作。此填充将不能与IE7或更早版本一起工作。

if (Object.defineProperty 
  && Object.getOwnPropertyDescriptor 
  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") 
  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

Object.defineProperty方法在IE9或更高版本中可用，但在IE8中仅对DOM对象可用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

textContent是唯一一个文本节点可用的:

var text = document.createTextNode('text'); console.log (text.innerText);/ /定义 console.log (text.textContent);/ /文本

在元素节点中，innerText计算<br>元素，而textContent计算控制字符:

var span = document.querySelector('span'); 跨度。innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8"; console.log (span.innerText);//上半场休息 console.log (span.textContent);//在下半场休息 < span > < / span >

跨度。innerText给实现:

1
2
3
4 5 6 7 8

跨度。textContent给:

1234
5
6
7
8

带有控制字符的字符串(例如换行符)在textContent中不可用，如果内容是用innerText设置的。另一种方式(设置控制字符与textContent)，所有字符返回innerText和textContent:

var div = document.createElement('div'); div.innerText = "x\ny"; console.log (div.textContent);/ / xy

对于那些在谷歌上搜索这个问题并来到这里的人。我觉得这个问题最明确的答案在MDN文档中:https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent。

你可以忘记所有让你困惑的要点，但要记住两件事:

当您试图更改文本时，textContent通常是您正在寻找的属性。 当您试图从某个元素中获取文本时，innerText近似于用户使用光标高亮显示元素内容并将其复制到剪贴板中所获得的文本。textContent提供了所有可见或隐藏的内容，包括<script>和<style>元素。

textContent返回全文，不关心可见性，而innerText则关心。

<p id="source">
    <style>#source { color: red; }</style>
    Text with breaking<br>point.
    <span style="display:none">HIDDEN TEXT</span>
</p>

textContent的输出:

#source { color: red; } Text with breakingpoint. HIDDEN TEXT

innerText的输出(注意innerText是如何意识到像<br>这样的标签，并忽略隐藏元素):

Text with breaking point.

除了其他答案中提到的所有差异之外，还有一个是我最近才发现的:

尽管innerText属性据说自2016年以来已经标准化，但它在浏览器之间表现出差异:Mozilla忽略了innerText中的U+200E和U+200F字符(“lrm”和“rlm”)，而Chrome则不会。

console.log (. getelementbyid(“测试”).textContent.length); console.log (. getelementbyid(“测试”).innerText.length); < div id = "测试" > [& # x200E;] < / div >

Firefox报告3和2,Chrome报告3和3。

还不确定这是否是一个bug(如果是的话，在哪个浏览器中)，或者只是我们不得不忍受的那些古怪的不兼容之一。