해당 포스팅에서는 innerHTML, innerText, textContent에 대한 특성을 알아보고 innerText와 textContent의 차이점에 대해 다룹니다.
| 프로퍼티 | textContent | innerText | innerHTML |
|---|---|---|---|
| 값 | raw text | rendered text | HTML parsed text |
| 성능 | 좋음 | 보통 | 나쁨 |
| 보안 | 취약 |
Element.innerHTML
const content = element.innerHTML;
element.innerHTML = htmlString;- 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서
textContent의 성능이 더 좋다. - XSS 공격 (en-US)의 위험이 있다.
Node.textContent
let text = someNode.textContent
someOtherNode.textContent = string<script>와<sytle>요소를 포함한 모든 요소의 콘텐츠를 가져온다.- 노드의 모든 요소 반환한다.
- XSS 공격 (en-US)의 위험이 없다.
HTMLElement.innerText
const renderedText = htmlElement.innerText
htmlElement.innerText = string- "사람이 읽을 수 있는" 요소만 처리한다.
- innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다)
- XSS 공격 (en-US)의 위험이 없다.
innerText와 textContent의 차이점
textContent는 <script>와 <style> 요소를 포함한 모든 요소의 컨텐츠를 가져온다. 반면 innerText는 “사람이 읽을 수 있는” 요소만 처리합니다.
<body>
<div id="text1">안녕
하세요</div>
<div id="text2" style="visibility:hidden;">안녕하세요숨긴거</div>
</body>
<script>
const text1 = document.getElementById("text1")
console.log(text1.innerText); // "안녕하세요"
console.log(text1.textContent); // "안녕\n하세요"
const text2 = document.getElementById("text2")
console.log(text2.innerText); // ""
console.log(text2.textContent); // "안녕하세요숨긴거"
</script>첫번째로 innerText는 줄바꿈을 인식하지 못하고 텍스트만 가져오는 반면에 textContent는 줄바꿈까지 모두 반영합니다. 두 번째로 만약 style로 visibility:hidden 값이 있는 경우 innerText는 해당 값을 인식하지 못하고, textContent는 인식합니다. 결론적으로 innerText는 아마도 개발자가 원하는 로직이 아닐 확율이 높습니다.
게다가 innerText는 텍스트가 어떻게 표시되는지 판단하기 위해서 레이아웃 시스템 정보까지 필요합니다. 이 때문에 리플로우가 발생하여 성능이 나쁩니다. innerText를 사용하는 경우는 textContent가 만들어지기 전부터 존재하던 API이기 때문입니다. 특히 IE에서는 innerText만 사용됐습니다. 프로젝트의 완성도를 높히기 위해서는 innerText가 아닌 textContent를 선택하는 것이 낫습니다.
자료 출처
https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
https://velog.io/@raram2/당신이-innerHTML을-쓰면-안되는-이유
https://developer.mozilla.org/ko/docs/Web/API/Node/textContent#innertext와의_차이점
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML
'FrontEnd' 카테고리의 다른 글
| [JS📜] Undefined와 null의 차이점, check (0) | 2022.09.05 |
|---|---|
| [React🍇] TDD용 Eslint 설정하기 (0) | 2022.09.04 |
| [React🍇] <datalist>로 이메일 자동 완성 기능 구현하기 (0) | 2022.08.30 |
| [React🍇] axios interceptors typescript로 설정하기 (0) | 2022.08.29 |
| [JS📜] 크롬확장프로그램 i18n 국제화 하는 방법 (0) | 2022.08.17 |