[CSS] textContent vs innerText vs innerHTML

1.  textContent

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Node.textContent - Web APIs | MDN

 

- textContent 는 node와 node의 자식node들의 textContent를 나타냅니다.

- textContent의 값은 string / null 입니다.

- textContent의 값이 null인 경우는 그 node가 doctype이나 document일 때 입니다.

- 해당 node가 text가 있는 node, text node이거나 comment, ProcessingInstruction, CDATASection 일 때 string을 반환한다.

(뒤의 2개는 처음 들어봤네요. 다음에 다시 체크하겠습니다.)

- 만약 위의 경우가 아니라면 textContent는 해당 노드의 자식 노드들의 textContent값을 연결해서 돌려준다고 합니다.

(이 때 comment, ProcessingInstruction 값은 제외하고 연결하며, 자식노드가 없을 경우 빈 문자열을 돌려줍니다.)

 

2.  innerText

textContent와 innerText가 이름이 비슷해서 헷갈릴 수 있습니다. 하지만 둘은 차이점이 분명합니다.

 

우선 textContent는 모든 요소의 content를 받을 수 있습니다. <script> 나 <style>까지도요.
하지만 innerText는 사람이 읽을 수 있을만한 요소의 content만 보일 수 있습니다.

 

그리고 textContent는 모든 요소의 content를 돌려줍니다.

하지만 innerText는 css상 보여지는 요소의 text만 돌려줍니다. 예를 들어 hidden으로 숨겨진 요소는 스킵합니다.

 

textContent, innerText는 모두 변경 시 자식 노드를 제거합니다.

 

 

3.  innerHTML

innerHTML은 말처럼 HTML을 반환합니다. 사람들이 종종 요소 안의 text를 가져오거나 다시 쓰기 위해 innerHTML을 사용하는데, 문제는 없습니다.

다만, textContent는 HTML요소를 parsing하는 과정을 거치지 않기 때문에 textContent의 성능이 더 좋습니다.

 

그리고 textContent는 XSS 공격을 방지할 수 있다고 합니다. (XSS공격이 뭐죠.. 아직 모르는 개념입니다.)