아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

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

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

2023. 5. 2. 15:10

 

 

 

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

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

developer.mozilla.org

 

728x90
저작자표시 (새창열림)

'Web > javascript' 카테고리의 다른 글

[자바스크립트] filter  (1) 2023.11.27
[자바스크립트] offsetX, screenX, clientX, pageX, layerX 각각의 차이  (0) 2023.08.01
[자바스크립트] 전개연산자  (0) 2023.04.25
[자바스크립트] DOMContentLoaded, load 차이  (0) 2023.04.14
[자바스크립트] Optional Chaining 연산자(?.)  (0) 2023.01.18

티스토리툴바