공통점
textContent와 innerText는 그자식 요소의 텍스트 콘텐츠를 반환하거나 대입할 수 있다.
차이점은
| textContent | innerText |
| 엔터를 이용한 줄바꿈 포함 | 엔터를 이용한 줄바꿈 미포함 |
| 스페이스를 이용한 연속적인 공백 포함 | 스페이스를 이용한 연속적인 공백 미포함 |
| 모든 텍스트 노드를 반환 | 사용자가 볼 수 있는 텍스트 노드만을 반환 |
| 모든 노드 개체에 대해 정의 | HTMLelement개체에 대해서만 정의 |
그렇다면 무엇을 쓰는게 좋은가?
-innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)
-Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.
-textContent는 XSS 공격 (en-US)의 위험이 없습니다.
https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
Node.textContent - Web API | MDN
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.
developer.mozilla.org
'javascript' 카테고리의 다른 글
| History api (pushState, replaceState) (0) | 2023.07.17 |
|---|---|
| forEach , map 알아보기 (0) | 2022.04.18 |
| i++와 i+=1의 차이점? (0) | 2022.04.05 |
| HTMLCollection vs NodeList (0) | 2022.04.01 |
| 프로미스(Promise)의 장점 (0) | 2022.03.28 |