innerHTML, innerText, textContent
위의 세 가지 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 굉장히 비슷하다. 조금씩 다른 차이가 있고 이 차이를 잘 알고 사용해야 한다.
1) innerHTML
innerHTML은
Element의 속성으로, element내에 포함 된 HTML또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다.
--> 한마디로 HTML 태그 + 태그 내부 텍스트
document.querySelector('div').innerHTML
// <div>hello world</div>- XSS 공격에 취약할 수 있다는 단점이 존재한다.
XSS가 뭔데 ⁉️
웹 브라우저에서 사용자가 입력할 수 있는 input 태그 등에 악의적인 script를 작성하여 해당 컨텐츠를 이용하는 다른 이용자의 개인 정보 및 쿠키정보를 탈취 / 악성코드 감염 / 웹페이지 변조 등의 공격을 말함
2) innerText
innerTxt는 마크업 언어가 적용된 상태로 읽어온다. 즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않는다. 즉 사용자에게 보이지 않는 값들은 아예 불러들이지 않는다 (display:none 이면 불러들이지 않음)
<div> hello <b style="display:none"/> world </div>
document.querySelector('div').innerText
// hello (word는 display:none 속성에 의하여 불러들이지 않는다.)3) textContent
textContent는 마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다.innerText와 차이점은textContent는 display:none의 속성을 가지더라도 불러들인다. 즉 마크업 태그를 제외한 내부에 존재하는 모든 텍스트를 불러들인다.
<div> hello <b style="display:none"/> world </div>
document.querySelector('div').innerText
// hello world