innerHTML

• innerHTML은 'Element'의 속성으로, element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.
• 그러나 이러한 부분 때문에 XSS 공격에 취약할 수가 있다고 한다.
  XSS 공격이란?
  웹 브라우저에서 사용자가 입력할 수 있는 input 태그 등에 악의적인 script를 작성하여 해당 컨텐츠를 이용하는 다른 이용자의 개인정보 및 쿠키정보 탈취 / 악성코드 감염 / 웹페이지 변조 등의 공격을 말한다.

textContent

• textContent는 'Node'의 속성으로, script 나 style 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.
• innerHTML은 textContent에 비해서 매번 스타일링까지 적용해서 헤비한 메소드이다. 따라서 textContent를 이용하는 것이 성능적으로 좋은 퍼포먼스를 보인다.

예제

• html

<div id='content'>
  안녕~ 
  <span style='display:none'>나를 볼 수 없어</span>
</div>

• script

const content = document.querySelector(#content);
console.log(content.innerHTML);
// html 전체를 다 가져옴.
// 안녕~
// <span style='display:none'>나를 볼 수 없어</span>
----------------------------------------------------
console.log(content.textContent);
// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴
// 안녕~
// 나를 볼 수 없어