Node.textContent

Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.

참고: textContentHTMLElement.innerText가 자주 혼동되곤 하지만, 두 속성에는 몇 가지 중요한 차이점이 있습니다.

구문

let text = someNode.textContent
someOtherNode.textContent = string

문자열 또는 null.

설명

textContent의 값은 상황에 따라 다릅니다.

  • 노드가 document 또는 Doctype이면 null을 반환합니다.
    참고: 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 document.documentElement.textContent를 사용하세요.
  • 노드가 CDATA 구획, 주석, 처리 명령, 텍스트 노드면 노드 내의 텍스트, 즉 Node.nodeValue를 반환합니다.
  • 다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 textContent를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다.

노드의 textContent를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치합니다.

innerText와의 차이점

비록 Note.textContentHTMLElement.innerText의 이름이 유사하긴 하지만, 중요한 차이가 있으므로 헷갈리지 마세요.

  • textContent<script><style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
  • textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
    • 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)
  • Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.

innerHTML과의 차이점

Element.innerHTML는 이름 그대로 HTML을 반환합니다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋습니다.

이에 더해, textContentXSS 공격의 위험이 없습니다.

예제

다음과 같은 HTML 조각에서...

<div id="divA">This is <span>some</span> text!</div>

textContent를 사용해 요소의 텍스트 콘텐츠를 가져오거나...

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'

텍스트 내용을 설정할 수 있습니다.

document.getElementById('divA').textContent = 'This text is different!';
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textContentChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

명세

Specification Status Comment
DOM
The definition of 'Node.textContent' in that specification.
Living Standard

참고