innerText와 textContent의 공통점은 무엇일까?

: 자바스크립트로 텍스트를 변경할 때 사용한다.

textContent

Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다.

요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 시작 태그와 종료 태그 사이 내의 텍스트를 모두 반환한다. 다시 말해, childNodes 프로퍼티가 반환한 모든 노드들의 텍스트 노드의 값 즉, 텍스트를 모두 반환한다. 이때 HTML마크업은 모두 무시된다.

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
    <div id="foo">
      Hello <span>world! </span>{' '}
    </div>
  </body>

  <script>
    console.log(document.getElementById('foo').textContent); // Hello world!
  </script>
</html>

요소 노드의 textContent 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 요소 노드가 제거되고 할당한 문자열이 텍스트로 추가된다. 이떄 할당한 문자열에 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식되어 텍스트로 취급된다. 즉, HTML 마크업이 파싱되지 않는다.

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
    <div id="foo">
      Hello <span>world! </span>{' '}
    </div>
  </body>

  <script>
    document.getElementById('foo').textContent = 'Hi <span>there!</span>';
  </script>
</html>

innerText

HTMLElement.innerText 프로퍼티는 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타낸다.

1
2
3
4
5
6
7
8
9
10
<h3>원본 요소:</h3>
<p id="source">
  <style>#source { color: red; }</style>
아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
  **<span style="display:none">숨겨진 글</span>**
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
1
2
3
4
5
6
const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;

source.textContent와 source.innerText 두 개가 어떻게 보일까?

👉🏻 textContent는 ‘숨겨진 글’ 을 반환한다. 하지만 innerText는 반환하지 않는다.

👉🏻 textContent는 HTML 마크업이 포함되더라도 무시한다. 하지만 innerText는
을 인식하고 한 줄을 개행한다.

*innerText는 렌더링 중인 요소를 반환하고,

textContent는 텍스트 노드를 반환한다.*

innterText와 textContent 중 무엇을 써야할까?

둘 다 유사한 동작을 하지만 innerText 프로퍼티는 다음과 같은 이유로 사용하지 않는 것이 좋다.

  • innerText 프로퍼티는 CSS에 순종적이다. 예를 들어, innerText는 CSS에 의해 비표시 (visibility: hidden) 로 지정된 요소 노드의 텍스트를 반환하지 않는다.
  • innerText 프로퍼티는 CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다.