innerHTML, innerText, textContent

위와 같이 html 파일을 작성했을때 브라우저와 innerHTML,innerText, textContent는 각각 어떻게 출력할까?

Element.innerHTML

• 값을 반환하는 경우, 속성은 div 태그안의 텍스트, 태그, 속성 등을 모두 가져온다.
• 값을 변경하는 경우, 태그도 넣을 수 있다. 자바스크립트로 문서에 태그를 생성할 수 있는데, 이는 보안에 취약하다는 단점이 있다. 다음의 경우에서는 스크립트가 html5 파일에 추가되는 문제가 발생한다. (XSS: Cross-site scripting)

div.innerHTML = `<script>악성코드</script>`

node.innerText

• 값을 반환하는 경우, 렌더링 된 텍스트를 리턴한다. 쉽게 말해 사람이 읽을 수 있는 텍스트만 리턴한다. (렌더링 중이 아니라면 textContent와 동일한 값을 리턴한다) 단, innerText는 css가 적용된 상태를 반환하므로 innerText의 최신값을 반영하기 위해 리플로우가(웹 페이지의 일부 또는 전부를 다시 처리하고 렌더링하는 것) 발생하는 데 이는 큰 비용이 발생하므로 피하는 게 좋다.
• 값을 변경하는 경우, 입력값이 그대로 들어간다.

node.textContent

• 값을 반환하는 경우는 상황에 따라 다르다.
  • 노드가 document 또는 Doctype이면 null 리턴
  • 노드가 CDATA구획, 주석, 처리 명령, 텍스트 노드면 노드 내의 텍스트, 즉 Node.nodeValue 리턴
  • 그외는 주석과 처리 명령을 제외한 모든 자식노드의 textContent를 병합한 결과 리턴
  • 자식이 없는 경우 빈 문자열 리턴
• 값을 변경하는 경우, 입력값이 그대로 들어간다.

위의 예시는 세 번째 경우가 해당되므로, div의 textContent("innerText와 textContent가 어떻게 다른지 비교를 하고 있는데\n", "과연 어떤 모습으로 출력될까")와 자식요소의 textContent("이건 화면에서 안보이도록 display를 none으로 설정")가 하나의 문자열로 출력되었다.