textContent与innerText之间的区别

Question

textContent和innerTextJavaScript有什么区别？

我可以使用textContent如下:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

Answer 1

其他答案都没有成功提供完整的解释,因此这一点.Kelly Norton的博客文章中很好地概述了innerText和之间的关键差异:innerText与textContent.您可以在下面找到摘要:textContent

1. innerText是非标准的,而textContent早先是标准化的.
2. innerText返回可见包含在一个节点的文本,而textContent返回完整文本.例如,在以下HTML上<span>Hello <span style="display: none;">World</span></span>,innerText将返回"Hello",同时textContent将返回"Hello World".有关更完整的差异列表,请参阅http://perfectionkills.com/the-poor-misunderstood-innerText/上的表格.
3. 因此,innerText性能更高:它需要布局信息才能返回结果.

innerText在IE8中的解决方法将涉及HTMLElement在所有textContent指定节点上使用的递归函数,这里是对polyfill 的尝试:

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;
}

Answer 2

不同之处在于它innerText是非标准的并且textContent是标准化的.这是innerText的官方警告.

此功能是非标准功能,不符合标准.不要在面向Web的生产站点上使用它:它不适用于每个用户.实现之间可能存在很大的不兼容性,并且行为可能在将来发生变化.

虽然Node适用于大多数浏览器,但它不适用于ie8或更早版本.使用此polyfill仅适用于IE8.该polyfill不适用于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);
       }
     }
   );
  })();
}

该textContent方法在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

Answer 3

textContent只在文本节点中可用.

var text = document.createTextNode('text');

console.log(text.innerText);    //  undefined
console.log(text.textContent);  //  text

在元素节点中,innerText评估<br>标签,textContent控制字符.

var span = document.querySelector('span');
span.innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8";

span.innerText

1
2
3
4 5 6 7 8

span.textContent

1234
5
6
7
8


如果内容是使用innerText设置的,则带有控制字符的字符串(例如换行符)不适用于textContent.另一种方式(使用textContent设置控制字符),所有字符都返回innerText和textContent.

var div = document.createElement('div');

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

Answer 4

大多数浏览器都支持textContent.ie8或更早版本不支持它,但可以使用polyfill

textContent属性设置或返回指定节点及其所有后代的文本内容.

请参见http://www.w3schools.com/jsref/prop_node_textcontent.asp

Answer 5

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

你可以忘记所有可能让你感到困惑的点,但要记住两件事:

1. 当您尝试更改文本时,textContent通常是您要查找的属性.
2. 当您尝试从某个元素中获取文本时,innerText如果用户使用光标突出显示元素的内容然后将其复制到剪贴板,则会近似用户将获得的文本.并textContent为您提供了一切,可见还是隐藏,包括<script>和<style>元素.

Answer 6

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

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

console.log(document.getElementById('test').textContent.length);
console.log(document.getElementById('test').innerText.length);

<div id="test">[&#x200E;]</div>

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

还不确定这是否是一个错误（如果是，则在哪个浏览器中），或者只是我们必须忍受的那些奇怪的不兼容性之一。

Answer 7

textContent返回全文并且不关心可见性，而 whileinnerText关心可见性。

<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.