오늘은 브라우저에서 자바스크립트로 DOM을 제어할 때,사용하는 메소드 중에서 텍스트를 다루는 메소드에 대해서 간략하게 정리하고자 합니다.
innerHTML
innerHTML은 HTML, XML을 읽어오거나, 설정할 수 있습니다. 문서의 모든 태그들을 파싱하여 가져오기 때문에 다른 메소들에 비해 속도가 느린편이며, 태그를 포함하고 있기 때문에 크로스 사이트 스크립팅(XSS)에 의한 보안이 취약합니다.
크로스 사이트 스크립팅(XSS)란 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다.
innerText
innerText는 사용자에게 '보여지는' 텍스트 값을 가져옵니다. 즉 브라우저에 표시되는 텍스트 값을 보여 줍니다. 예를 들어 노드에 style의 속성의 값으로 'display : none'으로 지정되어 있을 경우 innerText 메소드로는 값을 가져올 수 없습니다.
textContent
textContent는 innerText와 비슷하게 텍스트 가져오지만 innertext와 달리 HTML 요소에 style의 속성의 값으로 'display : none'을 주는 경우에도 해당 노드의 텍스트를 가져올 수 있습니다.
<div class="menu">menu
<div class="menu2">menu2</div>
</div>
const div = document.querySelector('.menu')
div.innerHTML // '\n menu\n <div class="menu2">menu2</div>\n '
div.innerText // 'menu\nmenu2'
div.textContent // '\n menu\n menu2\n '위의 코드를 보면 innertHTML은 띄어쓰기를 포함한 택스트, div 태그까지 모두 파싱하여 가져오는 특징이 잇습니다.
innertext는 태그 요소 내부의 텍스트만을 가져 오고 textContent는 띄어쓰기를 포함한 텍스트를 가져 온다는 것을 알 수 있습니다.
정리
innerHTML, innerText, textConent 모두 텍스트 값을 가져올 수 있다는 것은 동일 하였지만 각각의 특징이 존재했습니다. DOM을 활용하여 텍스트를 가져올 경우, 보안상의 문제로 innerHTML 사용은 지양하는 것이 좋겠습니다.
