[자바스크립트] textContent와 innerText 차이

 

 

 

Node.textContent와 HTMLElement.innerText의 이름이 유사하지만, 중요한 차이가 있다.

 

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

 

innerHTML과의 차이점

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

 

 

 

 

---

 

e.g.

 

 

html

<div id="div">This is <span style="display: none">some</span> text!</div>

 

js

let text1 = document.getElementById('div').textContent;
let text2 = document.getElementById('div').innerText;
let text3 = document.getElementById('div').innerHTML;

document.write(`textContent: ${text1}<br>`);
document.write(`innerText: ${text2}<br>`);
document.write(`innerHTML: ${text3}<br>`);

 

👇

 

출력 화면

 

 

HTML

 

 

 

 

 

 

---

참고: https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

Node.textContent - Web API | MDN