textContent와 innerText의 차이점

차이점은 무엇이며 textContent그리고 innerText자바 스크립트는?

textContent다음과 같이 사용할 수 있습니다 :

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

다른 답변은 전체 설명을 제공하는 데 성공하지 못 하므로이 답변은 없습니다. 사이의 주요 차이점 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;
}

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

두 innerText및 textContent모든 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 이상에서 사용할 수 있지만 DOM 객체에 대해서만 IE8에서 사용할 수 있습니다.

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

이 질문을 봤고 여기에 도착한 사람들을 위해. 이 질문에 대한 가장 명확한 대답은 MDN 문서 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent에 있습니다.

당신을 혼란스럽게 할 수 있지만 2 가지를 기억할 수있는 모든 점을 잊어 버릴 수 있습니다

1. 텍스트를 변경하려고 할 때 textContent일반적으로 찾고있는 속성입니다.
2. 일부 요소에서 텍스트를 가져 오려고 할 때 innerText커서로 요소의 내용을 강조 표시 한 다음 클립 보드에 복사하면 사용자가 얻는 텍스트 와 비슷합니다. 그리고 textContent당신에게 모든 것을 보이거나 숨겨진 포함 제공 <script>및 <style>요소.

textContent는 대부분의 브라우저에서 지원됩니다. ie8 또는 이전 버전에서는 지원되지 않지만이를 위해 폴리 필을 사용할 수 있습니다

textContent 속성은 지정된 노드 및 모든 하위 항목의 텍스트 내용을 설정하거나 반환합니다.

http://www.w3schools.com/jsref/prop_node_textcontent.asp를 참조 하십시오

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.

다른 답변에서 명명 된 모든 차이점 외에도 최근에 만 발견 한 또 다른 것이 있습니다.

이 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

이것이 버그인지 (그렇다면 브라우저에서) 또는 우리가 살아야하는 기발한 비 호환성 중 하나인지 확실하지 않습니다.

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 태그를 평가하지 않고 문자열로 인쇄합니다.

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