[JS] innerHTML, innerText, textContent

자바스크립트에서 html을 조작하는 방법은 정말 여러가지가 있는데

그중 입력을 기준으로 세가지 방법을 비교해보겠습니다.

 

 

 

 

textContent

textContent는 CSS요소를 고려하지 않기 때문에 가장 빠르지만, 읽을때 이야기이고, 쓸때는 결국 다른 요소들의 높이, 위치에 영향이 있기 때문에 CSS를 다시 그리는 reflow가 들어가게 됩니다.

<div id='sample'>Hello! <span> World!</span><div>

<script>
document.getElementById('sample').textContent = 'Hi<span>There!!</span>';

//화면출력
//Hi!<span>There!!</span>

textContent로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고

입력값은 모두 텍스트로만 인식되어 채워지게 됩니다.

따라서 하위 태그가 있는 경우 사용이 불가능합니다.

 

하지만 읽어올때는 성능이 가장 뛰어나며, css 속성과 무관하게 모든 text값을 불러올 수 있습니다.(태그 제외)

 

 

 

innerText

innetText 는 하위 요소를 건드리지 않고 해당 요소에 있는 text만 지우고 입력합니다.

입력할때 사용하면 무난하게 사용 가능합니다.

<div id='sample'>Hello! <span> World!</span><div>

<script>
document.getElementById('sample').innerText = 'Hi<span>There!!</span>';

//화면출력
//Hi!<span>There!!</span> World!

읽을때에는 눈에 보이는(랜더링이 되는) text만 가져와집니다.

innerHTML

textContent의 HTML 버전이며, 해당 요소 하위에 html자체를 입력합니다.

${}문법을 사용하여 여러가지 사용이 가능하지만, 

사용자의 입력값을 innerHTML로 사용하는 경우 사용자가 <script>를 삽입할 수 있어 악성코드를 심을수 있는등 XSS공격에 취약하다. 

해당 공격을 막는 방법도 여러가지 있지만 (<를 금지하거나,  %lt;로 치환하는 등) 그래도 주의해서 사용해야 한다.

<div id='sample'>Hello! <span> World!</span><div>

<script>
document.getElementById('sample').innerHTML = 'Hi<span>There!!</span>';

//화면출력
//Hi!There!! World!

읽을 때에는 html태그까지 모두 읽어옵니다.

 

 

 

 

참고 

https://tecoble.techcourse.co.kr/post/2021-04-26-cross-site-scripting/

innerHTML의 위험성, XSS에 대해 알아보자

https://velog.io/@kihyeon8949/JS-textContent-innerText-%EA%B7%B8%EB%A6%AC%EA%B3%A0-innerHTML

JS | textContent , innerText 그리고 innerHTML

모던 자바스크립트 딥다이브 - 이웅모저