Node.textContent

문자열 또는 null.

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

• 노드가 document 또는 Doctype이면 null을 반환합니다.

  참고 : 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 document.documentElement.textContent를 사용하세요.

• 노드가 CDATA 구획, 주석, 처리 명령, 텍스트 노드면 노드 내의 텍스트, 즉 Node.nodeValue를 반환합니다.

• 다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 textContent를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다.

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

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

• textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.

• textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.

  • 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)

• Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.

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

이에 더해, textContent는 XSS 공격의 위험이 없습니다.

다음과 같은 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>

• HTMLElement.innerText
• Element.innerHTML