innerText, innerHTML, TextContent는 텍스트 값을 읽어오거나 수정할 때 쓰이는 property다.
오늘은 이 세 개의 차이에 대해서 알아보려고 한다.
결론
- innerHTML은 최대한 사용을 자제하자.
- innerText는 상황에 맞춰 사용한다.
(IE8이하 환경이라면 innerText 사용 권장) - TextContent 사용 적극 권장
:: 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있다.
innerHTML
:: XSS 공격에 취약하다. 다시 말해 보안상 치명적인 결함이 있다. 심지어 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML을 사용하면 코드가 거부 될 가능성이 높다.
- XSS공격이란 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법을 말한다.
innerText
:: innerText는 "사람이 읽을 수 있는" 요소만 처리한다.
예를 들어, display:none은 렌더 트리에 포함되지 않기 때문에 사람이 읽을 수 없는 요소이므로 innerText를 사용했을 때는 보이지 않는다.
innerText 값을 읽으면 최신 계산값을 반영하기 위해 reflow가 발생한다.
- reflow는 브라우저 렌더링 엔진에서 layout을 다시 계산하는 과정이다. 이 부분에 대한 내용은 브라우저 작동 원리편을 참고하자.
TextContent
:: textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다. 다시 말해서, textContent는 노드의 모든 요소를 반환한다.
이해가 잘 안가니 TextContent와 innerText의 차이를 좀 더 직관적인 그림으로 살펴보자.
앞서 말했듯 innerText는 사람이 읽을 수 있는 요소만 처리하여 반환하기때문에 '숨겨진 글'은 보이지 않는 것을 알 수 있다. 그리고 <br>을 적용하여 반환하는 것도 textContent와의 차이라고 말할 수 있다.
- 그러면 textContent에서 '노드의 모든 요소를 반환한다'는 말은 무슨 뜻일까?
:: display:none처럼 렌더 트리에 포함되지 않는 요소도 렌더링 과정에서 paint한다는 말과 일맥상통한다고 볼 수 있다.
아래의 코드를 직접 적용하고 고쳐보면 개념을 좀 더 직관적으로 이해할 수 있다.
<html> <p id="source"> 아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요. <span style="display:none">숨겨진 글</span> </p> <h3>textContent 결과:</h3> <textarea id="textContentOutput" rows="6" cols="30">...</textarea> <h3>innerText 결과:</h3> <textarea id="innerTextOutput" rows="6" cols="30">...</textarea> <script> const source = document.getElementById('source'); const textContentOutput = document.getElementById('textContentOutput'); const innerTextOutput = document.getElementById('innerTextOutput'); textContentOutput.innerHTML = source.textContent; innerTextOutput.innerHTML = source.innerText;
매일 하루에 딱 한 걸음만