textContent, innerText, innerHTML 간단 비교(javascript)

요소의 텍스트를 다루는 textContent, innerText, innerHTML의 차이점과 유의 사항

요소에 접근해 데이터를 설정하거나 가져올 때 사용하는 프로퍼티인 textContent, innerText, innerHTML에 대해 알아보겠습니다.

<div id=1 onClick=(check(event))>click
    <div id=2>child1</div>
    <div id=3>child2
      <div id=4>grandchild</div>
    </div>
</div>

onClick 이벤트를 통해 div요소의 텍스트에 접근할 때 각각의 프로퍼티를 사용한 결과는 다음과 같습니다.


1. 실행 결과

const check = (event) => {
    console.log(event.target.textContent); 
}
const check = (event) => {
    console.log(event.target.innerText); 
}
const check = (event) => {
    console.log(event.target.innerHTML); 
}

textContent

text/plain으로 파싱하여 모든 요소를 반환합니다. <script>, <style> 요소를 포함해 CSS를 사용해 숨겨진 요소도 함께 반환하며 요소의 원시 텍스트를 사용하므로 성능이 좋습니다.

innerText

text/plain으로 파싱하여 렌더링 후의 요소를 반환합니다. <script>, <style> 요소는 반환하지 않으며 숨겨진 요소도 반환하지 않습니다. 자식 노드를 모두 제거하고 하나의 텍스트로 반환되며 성능은 보통입니다.

innerHTML

text/html로 파싱하여 요소의 html, xml 전체를 반환합니다. html을 다루므로 보안 이슈 중 하나인 XSS(Cross Site Scripting)에 취약합니다. HTML5에서는 innerHTML에 삽입된 <script> 태그는 실행되지 않도록 변경되었지만 <img>등 다른 태그를 통해 접근하면 여전히 취약점이 남습니다. 따라서 innerHTML은 별도로 문제 방지를 위한 설정이 없다면 사용을 권장하지 않습니다.



구현도 중요하지만 상황에 맞고 적절한 방식을 통해 구현한 시스템에 문제가 생기지 않도록 사전에 방지하는 것이 더 중요한 것 같습니다. 적절한 방식을 선택하는 것은 결국 각 기능의 이해를 통해서야 비로소 가능한 부분이므로 필요할 때 정리를 해두면 도움이 될 것 같습니다.