[Javascript] value, textContent, innerHTML, innerText 차이

input과 같은 form 요소의 값을 가져오고 싶을 때는 .value 를 사용하며
그 외 div 나 span 등의 요소 안에 있는 text를 읽고 싶을 때는 .textContent 의 메소드를 쓴다고 한다.

개인적으로는 textContent를 잘사용하지 않지만 이 또한 객체 안의 값을 변경할 때 사용되며, innerText, innerHTML의 차이는 무엇인지 알아보자

<div id="div1"> good evening <span>hello</span><span style="display:none">ya</span></div>

-innerHTML
innerHTML과 innerText의 차이로는 innerHTML은 말 그대로 HTML 태그 요소들까지 입력해서 직접 변경할 수 있다는 점이다. 그러나 이러한 부분 때문에 XSS 공격에 취약할 수가 있다고 한다.

document.getElementById("div1").innerHTML
//출력 : good evening <span>hello<span><span style="display:none;">ya</span>

 

XSS 공격이란?
웹 브라우저에서 사용자가 입력할 수 있는 input 태그 등에 악의적인 script를 작성하여 해당 컨텐츠를 이용하는 다른 이용자의 개인정보 및 쿠키정보 탈취 / 악성코드 감염 / 웹페이지 변조 등의 공격을 말한다.

---

 - innerText
: innerText는 마크업 언어가 적용된 상태로 읽어온다. 즉 태그와 마크업 언어와 같은 태그값은 불러들이지 않는다.
또한 사용자가 보이는 상태 style등 마크업 언어가 적용된 상태이다. 따라서 사용자에게 보이지 않는 값들은 아예 불러들이지 않는다. 즉 display : none; 한 값들은 불러들이지 않는다.

document.getElementById("div1").innerText
//출력 : good evening hello

 

- textContent 
: 마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다.
innerHTML은 textContent에 비해서 매번 스타일링까지 적용해서 헤비한 메소드이다. 따라서 textContent를 이용하는 것이 성능적으로 좋은 퍼포먼스를 보인다.

innerText와 다른 점은 innerText는 사용자에게 보이지 않는 텍스트 값은 가져오지 않지만, textContent는 마크업 태그를 제외한 텍스트라면 모두 불러들일 수 있다. 

document.getElementById("div1").innerText
//출력 : good evening hello ya

 

직접 하나씩 정리하니까 차근차근 정리가 된다!

Javascript: value vs textContent, innerHTML, innerText