Javascript : innerText와 textContent 차이 그리고 innerHTML

innerText와 textContent 차이

innerText와 textContent 의 값은 모두 text/plain 으로 파싱한 결과이다. 그래서 혼동하기 쉬우나 중요한 차이점이 있다.

• innerText : 화면에 보이는 내용만 보여준다. CSS등의 스타일링을 고려하기 때문에 리플로우가 발생한다. (리플로우 계산은 가능하면 피하는것이 좋다)
• textContent : <style>과 <script>의 content까지도 모두 가져온다.

HTML에 다음과 같은 태그가 있다고 가정하자.

<div id = 'practice'>
        <style>#k{color:red;}</style><br>Dom practice<br>HiHIHI<br>
</div>

 

1. 위의 HTML태그를 innerText를 이용하여 출력한 경우

console.log(document.querySelector('#practice').innerText)

//innerText를 이용한 출력
Dom practice
HiHIHI

2. 위의 HTML태그를 textContent를 이용하여 출력한 경우

console.log(document.querySelector('#practice').textContent)

//textContent를 사용하여 출력
#k{color:red;}Dom practiceHiHIHI

 

3. 실제 Console창

 

 

InnerText : 사람이 읽을 수 있는 요소만 보여주기 때문에, 화면에 보이는 그대로의 텍스트를 읽어올 때는 유용하다.

하지만 내부에 특별한 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다.

 

textContent : 식별자 노드의 내부 content를 text/plain 으로 파싱한 결과이다. 해당 요소 내부의 원시 텍스트를 보여주기 때문에 다른 프로퍼티들에 비해 파싱이 빠르다.

가급적 textContent를 사용하는 것이 좋은데 성능과 보안에 강점이 있고, 원시 텍스트를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문이다.

---

innerHTML은 보안에 취약하다.

 

또 비슷한 프로퍼티로 innerHTML이 있다. innerHTML 프로퍼티 값은 text/html 로 파싱한 결과이다. 상대적으로 파싱이 느리다.

더 큰 문제는 innerHTML이 대표적으로 공격에 취약한 사례로 언급된다는 점이다.

그렇기 때문에 innerHTML은 사용하지 않는것이 좋다.

 

 

 

참고자료 : https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

당신이 innerHTML을 쓰면 안되는 이유

 

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

Node.textContent - Web API | MDN