DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applications[[Prototype]]

DOM

Draft
  • account_tree
  • bug_report

StringtextContent

설명

노드가 가지고 있는 콘텐츠를 텍스트로 조회하거나 설정한다.

구문

기본형식
element.textContent

속성 명세

명세
분류설명
writableyes

기술 문서

textContent의 GET과 SET

상황에 따라 다른 textContent
  • 노드가 document 이거나 Doctype이면 null을 갖는다.
  • 노드가 CDATA Section, Comment, ProcessingInstruction, Text 이면 노드 내의 텍스트 즉, nodeValue를 갖는다.
  • 다른 노드 유형에 대해서는 Comment와 ProcessingInstruction을 제외한 모든 자식 노드의 textContent를 병합한 결과를 갖는다. 자식이 없는 경우 빈 문자열 값을 갖는다.

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

innerText와의 차이점

Node의 textContent 프로퍼티와 HTMLElement의 innerText의 역할은 유사해 보이지만 다음과 같은 차이가 있다.

  • textContent<script><style> 요소를 포함한 모든 요소의 콘텐츠를 조회한다. 그러나 innerText 프로퍼티는 사람이 읽을 수 있는 텍스트만 조회한다.
  • textContent는 노드의 모든 요소를 조회한다. 그러나 innerText는 스타일링을 고려하며 숨겨진 요소의 텍스트는 조회되지 않는다. 또한 innerText는 CSS 고려로 인해 innerText로 값을 조회하면 최신 계산값을 반영하기 위해서 리플로우(Reflow)가 발생한다.
  • IE의 경우 innerText로 콘텐츠를 수정하면 요소의 모든 자식 노드를 제거하고 모든 자손 텍스트 노드를 영구히 제거한다. 이로 인해 텍스트 노드를 이후에 다른 노드를 물론 같은 노드에 삽입하는 것이 불가능하다.

innerHTML와의 차이점

Element 객체의 innerHTML은 태그를 포함한 값을 조회한다. 요소의 텍스트만을 조회하고자 한다면 textContent가 성능이 더 좋다. 문자열로 태그를 설정하면 요소로 변환된다는 점에서 편할 수 있겠지만 XSS 공격의 위험을 가지고 있다.

지원 웹브라우저