오랜만에 순수TS(?) 코드를 쓰다가 의문이 생겨서 정리하는 글 입니다.
📍textContent
⇨ textContent는 단순히 텍스트를 읽어오고 쓰는 속성 입니다. 노드와 그 자식 노드의 텍스트 콘텐츠를 나타냅니다.
⇨ 사용자에게 어떻게 보여지는지 < script >와 < style > 요소에 대한 정보가 없기 때문에 정말 노드 자체에 들어있는 내용을 텍스트로 반환하게 됩니다.
⇨ 그래서 다른 프로퍼티들 중 파싱이 가장 빠릅니다.
( textContent를 써서 텍스트를 읽을때는 CSS에 대한 정보도 없이, 브라우저에 어떻게 표기 되는지 확인을 하지 않아도 되어서 (※ reflow) 읽는 속도가 다른 프로퍼티들 보다 빠릅니다.)
📍innerText
⇨ innerText 속성은 요소와 그 자식 요소의 렌더링 된 텍스트 콘텐츠 와 비슷하다.
⇨ ✅ innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.
🌟 textContent와 innerText의 차이.
- innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.
- textContent 속성은 는 < script >와 < style > 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다.
반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
- textContent 속성은 는 < script >와 < style > 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다.
- textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
- 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 reflow가 발생합니다. reflow 계산은 비싸므로 가능하면 피해야 합니다)
📍innerHTML
⇨ innerHTML 은 요소(element) 내에 포함 된 HTML 마크업(string, spacing, line breaks...etc)을 가져오거나 설정합니다.
⇨ innerHTML 값을 설정하면 요소의 기존 내용(content)을 새 내용으로 쉽게 변경할 수 있습니다.
🌟 textContent와 innerHTML의 차이.
-
innerHTML는 이름 그대로 HTML을 반환합니다.
-
읽을 때 차이 : innerHTML을 써서 정보를 읽게 되면 CSS 정보와 지금 브라우저에서 어떻게 표기 되고 있는지 확인하는 절차가 필요하기 때문에 순수 textContent 보다는 느리다.
-
텍스트를 설정할 때 차이 : 둘다 텍스트를 설정할때 현재 요소의 너비와 높이에 영향을 준다면 둘다 설정시 layout이 발생하고 reflow가 발생한다.
-
innerHTML는 XSS 공격(cross site security attacks)의 위험이 있습니다.
- 따라서 텍스트를 추가하려면 보안상의 이유로 이것을 피하는 것이 좋습니다.
| 프로퍼티 | textContent | innerText | innerHTML |
|---|---|---|---|
| 값 | raw text | rendered text | HTML parsed text |
| 성능 | 좋음 | - | - |
| 보안 | - | - | 취약 |
※ reflow
: 렌더링 과정을 거친 뒤에 최종적으로 페이지가 그려진다고 해서 렌더링 과정이 다 끝난것이 아닙니다. 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다. 이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow라고 합니다.
참고자료 | 당신이 innerHTML을 쓰면 안되는 이유
참고자료|https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
참고자료 | Why textContent is better than innerHTML and innerText?
