InnerHTML & InnerText & TextContent 의 차이

 

 

 

이미지 출처 : Jorge del Casar

innerHTML

display:none으로 지정한 요소, 자식 요소의 element tags, 모든 스페이싱(띄어쓰기), 줄 바꿈이 그대로 출력된다.

세 가지 중에서 가장 추천하지 않는 속성이다

프로퍼티의 값은 text와 html로 파싱 한 결과이며 다른 속성에 비해 상대적으로 파싱이 느리다

하지만 파싱이 느리다는 점 보다 더 큰 문제는 보안 취약성 문제이며,

XSS의 취약 사례로 언급이 되기도 했었다.

 

innerText

text, plain으로 파싱한 결과이며 element tags 없이 딱 텍스트만 나온다.

만약 여러 번 중복되는 스페이싱이 존재한다면 딱 한 번만 나오며, 줄 바꿈은 따로 적용되지 않는다

innerText는 IE8이하에서 지원되지 않았던 TextContent와 달리 IE엔진에 적합한 속성이기 때문에

다른 브라우저가 아닌 IE를 중점적으로 고려하는 경우 TextContent를 대신하거나,

화면에 있는 텍스트 그대로 읽어오고 싶을 때 사용하기에 괜찮다

 

TextContent

위의 innerText처럼 프로퍼티가 text, plain으로 파싱 한 결과이며 element tags 없이 텍스트만 나온다

여기까지만 보면 innerText와 같아 보이지만, 여러 번 중복되는 스페이싱과 줄 바꿈 모두 그대로 적용이 된다.

또한 노드가 갖고 있는 모든 텍스트를 읽어오기 때문에 display:none; 의 속성을 준 텍스트도 읽어온다

세 가지 속성 중 가장 사용을 추천하는 속성이며, 성능이나 보안적인 측면에서 가장 뛰어나다

 

 

Ref.

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent#innertext%EC%99%80%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90

https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0