[JavaScript] innerText, innerHTML, textContent 차이점

이번에 당근게임 프로젝트를 진행하면서, innerText와 innerHTML의 차이점에 대해서 매우 궁금해졌다. 이번에 프로젝트를 진행한 계기로 한번 정리할려고한다.

아래와 같은 코드에 innerHTML, innerText 두개다실행해 보겠습니다.

    <div class="study">
      <h1>
        Hello<br />
        <h2 style="display: none">반갑습니다.</h2>
      </h1>
    </div>

innerHTML

innerHTML은 이름 그대로 HTML을 반환합니다.

  <h1>
        Hello<br>
        </h1><h2 style="display: none">반갑습니다</h2>

innerText

innerText는 사용자에게 보여지는 텍스트 값을 가져옵니다.
즉, 반갑습니다는 display:none이 되어있기에 출력되지 않습니다.

Hello

textContent

textContent는 'node'의 속성으로, innerText와는 다르게 script나 style태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.

		Hello
		반갑습니다

예를들어 우리가 style태그를 활용하여 display: none;을 했습니다. 이 텍스트 문자열또한 출력됩니다.