[JavaScript] innerHTML, textContent, innerText 차이점 비교

innerHTML

많은 사람들이 사용하고있고 나 또한 온라인 강의로 Javascript를 배울 때 모든 강의에서 innerHTML을 사용하고 있었다.

그런데 위 세가지 방법중 가장 추천하지 않는 방법이다.

체감적으로 느낄 수 있을지 모르겠지만 다른 방법들에 비해 파싱이 느리고

잠재적인 보안 위험(XXS 공격)이 발생할 수 있다는 점이다.

보안 문제 참고

textContent

innerHTML 보다 성능과 보안에 강점이 있다.

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

또한 innerHTML에서 언급되었던 잠재적인 보안 위험인 XXS공격의 위험이 없다.

innerText

textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 반면에 innerText는 사람이 읽을 수 있는 요소만 처리한다.

textContent는 노드의 모든 요소를 반환한다. 그에 비해 innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 반환하지 않는다.

또한, innerText의 CSS 고려로 인해 innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야한다.)

Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능하다.

그러므로 textContent를 사용하도록 하자

프로그래밍 공부 노트