[JavaScript] 텍스트 속성 innerHTML, innerText, textContent

What

자바스크립트를 이용해서 DOM을 제어할 때, 그 DOM의 텍스트 속성으로 자주 사용되는 것들이 있다.

HTML 태그까지 모두 가져오는 innerHTML, 태그를 제외하고 오로지 텍스트만 가져오는 innerText, 텍스트 노드를 가져오는 textContent가 바로 이번에 다룰 DOM 텍스트 속성들이다. 각 속성별로 대표적인 특징이 무엇인지, 무슨 차이가 있는지 알아보도록 하자.

 

How

innerHTML

<div id="app">
    <p>Hello World!</p>
    <!-- 이것은 주석입니다. -->
    <script>
        const a = 1;
    </script>
</div>

const app = document.getElementById('app');
console.log(app.innerHTML);

// Console
      <p>Hello World!</p>
      <!-- 이것은 주석입니다. -->
      <script>
        const a = 1;
      </script>

innerHTML은 가장 일반적이고 많이 사용되는 속성 중 하나이다. 사실 텍스트 속성이라고 하기에도 애매하다.

텍스트를 포함하여 태그, 주석, 공백까지 그냥 HTML의 모든 요소들을 인식한다고 보면 된다.

 

위의 예시 코드를 보면, app 요소 안에 p 태그와 주석, 스크립트까지 모두 포함되어 있는 걸 볼 수 있다.

app.innerHTML로 확인해보면 그냥 HTML에 적혀 있는 대로 빠짐없이 app 요소 안에 있는 것들이 통째로 출력된다.

태그를 인식한다는 대표적인 특징때문에, innerHTML은 주로 JS로 HTML을 쉽게 추가하고 싶을 때 사용되기도 한다.

예를 들어 span 태그를 추가한다고 할 때, createElement('span')이 아닌 innerHTML = '<span></span>' 을 해버리면

쉽게 추가할 수 있다.

 

innerText

const app = document.getElementById('app');
console.log(app.innerText);

// Console
Hello World!

innerText는 사용자들에게 보여지는 텍스트 그 자체만을 가져온다. innerHTML처럼 공백을 인식하지도 않고, 오로지 텍스트만을 가져오기 때문에 불필요한 태그나 공백 없이 텍스트만 필요할 때 사용하면 좋다.

단지, 한 가지 주의할 점은 사용자 입장에서 보여지는 텍스트만 인식한다는 특징이 있기 때문에, 스타일에 'display: none'으로 설정된 요소들은 인식하지 않는다.

 

textContent

const app = document.getElementById('app');
console.log(app);
console.log(app.textContent);

// Console (app)
    <div id="app">
        <p>Hello World!</p>
        <!-- 이것은 주석입니다. -->
        <script>
        const a = 1;
        </script>
    <div>
      
// Console (app.textContent)

        Hello World!


        const a = 1;

textContent는 텍스트 노드를 가져온다고 되어있는데, 쉽게 말하면 그냥 innerHTML에서 텍스트 요소만 출력한다고 보면 된다. 주석을 제외하고 어떤 것이든 상관없다. 그냥 텍스트로 되어 있으면 그 텍스트를 반환한다. (innerText처럼 사용자 입장이 아닌 노드로 접근하기 때문에 텍스트로 되어 있는 노드를 모두 반환하는 것이다. 노드 입장으로 봤을 땐 엔터 줄바꿈도 1개의 텍스트 노드이고, 스크립트 안의 코드도 1개의 텍스트 노드이다.)

 

위의 코드의 경우 app 요소를 콘솔로 찍어봤을 때 다음과 같은 결과가 출력됐다. 그리고 app.textContent를 출력해봤더니

위의 app 출력 결과에서 텍스트만 추려서 나온 것을 볼 수 있다. 심지어 공백도 동일하게 인식한다.

 

1. 태그를 추가하거나, 태그까지 확인하고 싶을 땐 innerHTML
2. 사용자 입장에서 보이는 텍스트만 확인하고 싶을 땐 (공백 미포함) innerText
3. DOM 입장에서 textNode를 확인하고 싶을 땐 (내용 + 스크립트 + 공백 및 다수의 띄어쓰기) textContent
4. 'display: none'인 것도 확인하고 싶으면 textContent