在JavaScript中textContent和innerText之间的区别是什么?

我可以使用textContent如下:

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

当前回答

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

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

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

其他回答

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

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

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

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

document.querySelector('h1').innerText/innerHTML/textContent 

.querySelector (h1)。innerText -给我们里面的文本。它对当前正在显示的内容敏感,或者忽略正在隐藏的人员。

.querySelector (h1)。textContent -它类似于innerText,但它不关心显示的内容或实际显示给用户的内容。它会显示一切。

.querySelector (h1)。innerHTML = <i>sdsd</i> Will work* -检索完整的内容,包括标签名称。

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

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.