[javascript] textContent와 innerText의 차이점

다른 답변은 전체 설명을 제공하는 데 성공하지 못 하므로이 답변은 없습니다. 사이의 주요 차이점 innerText과는 textContent아주 잘 설명되어 있습니다 켈리 노턴의 블로그 게시물 : 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’ 에서 더 읽기 는 Firefox에서는 작동하지만 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;
}

답변

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

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

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>

1
2
3
4 5 6 7 8

1234
5
6
7
8

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

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

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

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

Text with breaking point.

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

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