Question

JavaScript中textContent和innerText之间有什么区别？

我可以按如下方式使用textContent：

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

Answer 1

其他答案都没有成功提供完整的解释，因此这一点。 innerText和textContent之间的主要区别在Kelly Norton's blogpost: innerText vs. textContent中得到了很好的概述。您可以在下面找到摘要：

innerText是非标准的，而textContent之前是标准化的。
innerText返回节点中包含的可见文字，而textContent则返回完整文字。例如，在以下HTML <span>Hello <span style="display: none;">World</span></span>上，innerText将返回＆＃39; Hello＆＃39;而textContent将返回＆＃39; Hello World＆＃39;。有关更完整的差异列表，请参阅http://perfectionkills.com/the-poor-misunderstood-innerText/。
因此，innerText的性能要高得多：它需要布局信息才能返回结果。

IE8中textContent的变通方法将涉及在指定节点的所有nodeValue上使用childNodes的递归函数，这里是尝试填充：

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的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

虽然textContent适用于大多数浏览器，但它不适用于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);
       }
     }
   );
  })();
}

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

Answer 3

大多数浏览器都支持textContent。 ie8或更早版本不支持它，但polyfill可用于此

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

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

Answer 4

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

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

当您尝试更改文字时，textContent通常是您要查找的属性。
当您尝试从某个元素中抓取文本时，innerText近似于用户使用光标突出显示元素内容然后复制到剪贴板时将获得的文本。 textContent为您提供可见或隐藏的所有内容，包括<script>和<style>元素。

Answer 5

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

尽管据说innerText属性自2016年以来就已经标准化，但它在浏览器之间仍然存在差异：Mozilla忽略{{中的U + 200E和U + 200F字符（“ lrm”和“ rlm”） 1}}，而Chrome没有。

innerText

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

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

现在还不确定这是一个错误（如果是，是在哪个浏览器中）还是仅仅是我们必须忍受的那些古怪的不兼容之一。

Answer 6

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.

Answer 7

innerHTML甚至会执行HTML标记，这可能会导致任何类型的客户端注入攻击（例如基于DOM的XSS）的危险。这是代码段：

<!DOCTYPE html>
<html>
    <body>
        <script>
            var source = "Hello " + decodeURIComponent("<h1>Text inside gets executed as h1 tag HTML is evaluated</h1>");  //Source
            var divElement = document.createElement("div");
            divElement.innerHTML = source;  //Sink
            document.body.appendChild(divElement);
        </script>
    </body>
</html>

如果您使用.textContent，它将不会评估HTML标记并将其打印为String。

<!DOCTYPE html>
<html>
    <body>
        <script>
            var source = "Hello " + decodeURIComponent("<h1>Text inside will not get executed as HTML</h1>");  //Source
            var divElement = document.createElement("div");
            divElement.textContent = source;  //Sink
            document.body.appendChild(divElement);
        </script>
    </body>
</html>

参考：https://www.scip.ch/en/?labs.20171214

Answer 8

与 innerText 相比，textContent 的另一个有用行为是换行符和彼此相邻的多个空格将仅显示为一个空格，这样可以更容易地比较字符串。

但根据您的需要，firstChild.nodeValue 可能就足够了。

Answer 9

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

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

.querySelector('h1').innertextContent - 它就像innerText，但它不关心显示的内容或实际显示给用户的内容。它将显示所有。

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

textContent与innerText之间的区别

9 个答案: