innerText, textContent, innerHTML의 차이

1. innerText

• 해당 요소 내에서 사용자에게 ‘보여지는’ 텍스트 값
• display: none 으로 정의된 숨겨진 텍스트는 가져오지 않는다.
• 사용자가 브라우저에서 ctrl + c 해서 클립보드에 복사한 내용을 가져오는 것과 마찬가지이다.
• innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. 

 

2. textContent

• Node의 속성
• innerText와 달리 <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
• textContent로 가져온 것은 모두 string 이다.
• HTML로 분석할 필요가 없기 때문에 innerHTML보다 textContent의 성능이 더 좋다. 
• 세 가지 중에 권장하는 속성이다.

 

3. innerHTML

• 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정
• 현재 내용으로 기반으로 생성, 반환된 마크업이 본래의 마크업과 일치하지 않을 수 있다.
• xss 공격 등 보안에 취약하다.