MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Node.textContent

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Node.textContent 프로퍼티는 노드와 그 자손의 텍스트 내용을 표시한다.

문법

var text = element.textContent;
element.textContent = "this is some sample text";

설명

  • 만약 요소가 문서, 문서 형식 혹은 표기법일 때 textContent null 값을 반환한다. 문서 전체의 텍스트와 CDATA 데이터를 선택하는 한가지 방법은 document.documentElement.textContent를 사용하는 것이다.
  • 만약 노드가 CDATA 섹션, 주석, 처리 명령 혹은 텍스트 노드일 때, textContent는 해당 노드(nodeValue) 안의 텍스트를 반환한다.
  • 다른 유형의 노드에서 textContent 는 연쇄적으로 모든 자식 노드의 주석과 처리 명령을 제외한 textContent 프로퍼티를 반환한다. 만약 자식 노드가 없다면 빈 문자열을 반환한다.
  • 이 프로퍼티를 설정하면 해당 노드의 자식 노드 모두를 지우고 그것들을 주어진 값인 단일 텍스트 노드로 대체한다.

innerText와의 차이점

Internet Explorer는 node.innerText를 도입했다. 그 의도는 유사하나 아래와 같은 차이점이 있다 :

  • textContent <script>와 <style> 요소를 포함한 모든 요소들의 내용을 가져오는 반면 innerText는 그렇지 않다.
  • innerText style을 인지하고 숨겨진 요소들의 텍스트를 반환하지 않지만 textContent는 반환한다.
  • innerText는 CSS 스타일링을 인지하기 때문에 레이아웃의 변화를 가져올 수 있지만 textContent는 그렇지 않다.
  • textContent와는 달리 (버전 11 까지를 포함한) Internet Explorer에서 innerText를 대신 사용하면 요소의 자식 노드를 지우는 것 뿐만이 아니라 텍스트 노드의 모든 자손을 영구적으로 제거한다. (그래서 더이상 해당 노드를 다른 요소 혹은 같은 요소에 다시 삽입하는게 불가능해진다.)

innerHTML과의 차이점

Element.innerHTML는 그것의 이름이 나타내는 HTML을 반환한다. 꽤 자주, 검색 혹은 요소 안에 텍스트 작성을 위해 사람들이 innerHTML을 사용하지만, textContent가 텍스트를 HTML로 파싱하지 않기 때문에 종종 더 좋은 성능을 보여준다. 게다가 textContent를 사용하면 XSS(크로스 사이트 스크립팅) 공격을 방지할 수 있다.

예제

// 아래와 같이 주어진 HTML 일 부분:
//   <div id="divA">This is <span>some</span> text</div>

// 텍스트 내용 획득:
var text = document.getElementById("divA").textContent;
// |text| 를 "This is some text"로 설정한다.

// 텍스트 내용 설정:
document.getElementById("divA").textContent = "This is some text";
// 현재 divA의 HTML:
//   <div id="divA">This is some text</div>

IE8을 위한 폴리필

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

 

브라우저 호환성

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
기본 지원 1+ (Yes) 2 9 9.64 (possibly earlier) 3 (possibly earlier)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
기본 지원 ? (Yes) ? ? ? ?

명세

명세서 상태 주석
DOM
The definition of 'Node.textContent' in that specification.
Living Standard

DOM4와 비교하여 변화 없음

DOM4
The definition of 'Node.textContent' in that specification.
Recommendation  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.textContent' in that specification.
Recommendation 도입

참고

문서 태그 및 공헌자

 이 페이지의 공헌자: kooljay82
 최종 변경: kooljay82,