[Javascript/자바스크립트] innerHTML, innerText, textContent의 차이

innerHTML

---

innerHtml은 마크업 태그를 핸들링할 수 있기 때문에 태그(div, img, script...)들을 삽입 가능합니다.

 

각종 태그들을 삽일할 수 있다보니 input 태그에 악성 스크립트를 삽입하는 XSS 공격의 가능성이 존재합니다.

 

<input id="password">
<button id="login-btn">Login</button>
<div id="result"></div>

<script>
    document.querySelector('#login-btn').addEventListener('click',()=>{
        const pw = document.querySelector('#password').value
        document.querySelector('#result').innerHTML = pw
    })
</script>

<!-- input : <img src="#" onerror="alert('hello')"> -->

input으로 위와 같이 스크립트 태그를 넣으니 정상적으로 작동되는 것을 볼 수 있습니다.

 

저는 간단히 alert를 사용했지만 충분히 악의적으로 사용할만 합니다.

 

이에 최대한 innerHTML 사용을 지양하는 편이 좋습니다.

 

 

 

 

innerText, textContent

---

innerText 프로퍼티는 textContent와 기능이 유사하지만 중요한 차이점이 존재합니다.

 

이는 반환하는 값과 성능 두가지 측면에서 알아보겠습니다.

 

• 반환 값

innerText의 값은 원시 텍스트가 최종적으로 style 같은 마크업 언어가 렌더링 된 상태로 읽어오지만,

textContent의 값은 원시 텍스트의 값을 그대로 가져옵니다.

 

• 성능

textContent가 과정을 거치지 않고 원시 텍스트를 가져오기 때문에 innerText보다 성능이 좋은 편입니다.

 

 

결론적으론 innerHTML, innerText보다 textContent를 사용하여 성능과 보안을 챙기고,

원시 텍스트를 얻어내 의도한 대로 가공할 수 있습니다.

 

그럼 마지막으로 둘의 차이점을 나타내는 코드를 보고 마치겠습니다.

 

<div id="text">
    this is     text!
    <p style="display: none;"> display : none!!!! </p>
</div>
<script>
    const tc = document.querySelector('#text').textContent
    console.log(tc)
    
    const it = document.querySelector('#text').innerText
    console.log(it)
</script>

좌 : textContent / 우 : innerText

좌측이 textContent, 우측이 innerText의 결과입니다.

 

살펴보면 textContent는 raw하게 모든 텍스트를 나타냈고

innerText는 display : none으로 적용한 스타일이 렌더됨과 동시에 여러개의 공백을 하나로 줄여서 나타내줍니다.