textContent与innerText之间的区别

2020/10/28 02:42 · javascript ·  · 0评论

textContentinnerTextJavaScript和有什么不一样

我可以使用textContent以下方法:

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

没有其他答案可以提供完整的解释,因此没有一个。innerText之间的主要区别textContentKelly Norton的博客中很好地概述了:innerText与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/上的表(进一步阅读'innerText'在IE中有效,但在Firefox中无效)。
  3. 结果,innerText性能变得更为沉重:它需要布局信息才能返回结果。
  4. innerText仅针对HTMLElement对象定义,而textContent针对所有Node对象定义

textContentIE8中的一种解决方法是nodeValue所有childNodes指定节点使用递归函数,这是尝试使用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;
}

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";
console.log(span.innerText); // breaks in first half
console.log(span.textContent); // breaks in second half
<span></span>

span.innerText 给出:

1
2
3
4 5 6 7 8

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

两者innerTexttextContent都从2016年开始标准化。所有Node对象(包括纯文本节点)都具有textContent,但是只有HTMLElement对象具有innerText

虽然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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

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

您可以忘记可能会使您感到困惑的所有要点,但请记住两点:

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

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

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

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

除了其他答案中提到的所有区别之外,这是我最近才发现的另一个区别:

即使该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。

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

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.

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

本文地址:http://javascript.askforanswer.com/textcontentyuinnertextzhijiandequbie.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!