비슷비슷하지만 서로 다른 세 가지 속성 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다.
innerHTML vs innerText vs textContent
눈으로 쉽게 확인 할 수 있도록 예시로 만들어 보았습니다.
1. innerHTML
innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다.
위 예제에서 'innerHTML' 버튼을 클릭하면,
div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다.
사용자가 브라우저에서 div의 내용을 Ctrl+C하여 클립보드에 복사한 내용을 가져온다고 생각하면 이해하기 쉽습니다.

2. innerText
innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옵니다.
위 예제에서 'innerText' 버튼을 클릭하면,
아래와 같은 텍스트를 가져옵니다.

원래 div안에는
'안녕하세요? 만나서 반가워요'가 입력되어 있지만,
브라우저가 사용자에게 이 내용을 보여줄 때는, 연속되는 공백은 무시하고 하나의 공백만 처리하여
'안녕하세요? 만나서 반가워요.'라고 보여집니다.
또한, 위 예제의 div는 'display:none' 으로 정의된 텍스트를 포함하고 있습니다.
'display:none'으로 정의된 '숨겨진 텍스트'는 브라우저에서 사용자에게 보여지지 않습니다.
innerText는 이처럼 스타일을 통해 숨긴 값은 읽어오지 않고 사용자에게 보여지는 텍스트를 가져옵니다.
3. textContent
textContent는 'Node'의 속성으로,
innetText와는 달리 <script>나 <style> 태그와 상관없이 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.

위 예제에서 textContent 버튼을 클릭하면, 위와 같은 결과가 나오는데,
'안녕하세요? 만나서 반가워요.'의 연속된 공백이 그대로 표현된 것을 확인 할 수 있습니다.
또한, 'display:none' 스타일이 적용된 '숨겨진 텍스트' 문자열도 그대로 출력되는 것을 확인 할 수 있습니다.
innerHTML, innerText, textContent 의 차이점을 알아보았습니다.
일반 Text값을 가지고 올때는 세 가지 속성에 별 차이가 없지만,
element가 가지고 있는 컨텐츠의 내용에 따라서 차이가 나는 것을 확인하였습니다.
'공부노트 > JavaScript' 카테고리의 다른 글
JavaScript - 화살표 함수(Arrow function) (0) | 2022.02.12 |
---|---|
[JavaScript] foreach와 for in , for of 반복문 (0) | 2021.09.30 |
[JavaScript] Arrow Function(화살표 함수) (0) | 2021.09.30 |
[JavaScript] This (공식화) (0) | 2021.09.28 |
[JavaScript] 연산자 (0) | 2021.09.25 |