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

Intro

• View 에서 가져온 data 를 표기하는 과정에서 문득 value, textContent, innerHTML, innerText의 차이에 대해 궁금해졌다.
• 아래의 샘플 html 파일을 통해 각각의 차이를 알아보도록 하자.

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

Value

• input과 같은 form 요소의 값을 가져오고 싶을 때는 .value 를 사용한다.

innerHTML

• innerHTML은 말 그대로 HTML 태그 요소들까지 입력해서 직접 변경할 수 있다.
• 이러한 부분 때문에 XSS 공격에 취약할 수가 있다고 한다.
  • XSS 공격이란? : 웹 브라우저에서 사용자가 입력할 수 있는 input 태그 등에 악의적인 script를 작성하여 해당 컨텐츠를 이용하는 다른 이용자의 개인정보 및 쿠키정보 탈취 / 악성코드 감염 / 웹페이지 변조 등의 공격을 말한다.

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

innerText

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

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

textContent

• div 나 span 등의 요소 안에 있는 text를 읽고 싶을 때는 .textContent 를 사용한다.
• 마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다.
• innerHTML은 textContent에 비해서 매번 스타일링까지 적용해서 헤비한 메소드이다. 따라서 textContent를 이용하는 것이 성능적으로 좋은 퍼포먼스를 보인다.
• innerText는 사용자에게 보이지 않는 텍스트 값은 가져오지 않지만, textContent는 마크업 태그를 제외한 텍스트라면 모두 불러들일 수 있다.

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

https://ninetynine-2026.tistory.com/509