innerText vs textContent vs innerHTML

Node, element의 텍스트값을 읽어오고 설정할 수 있다.

InnerText / innerHTML

다루는 값이 text element인가,html element인가

InnerHTML

• 엘리먼트 안의 전체 HTML, XML을 가져온다.

<div id='my div'>
	화면에 출력될 텍스트
	<span style= 'display:none'> 숨겨진 텍스트 </span>
</div>

//전체 태그를 포함한 텍스트가 출력된다.

text만 바뀌는 상황이라면 innerHTML이 아닌 textContent로도 사용할 수 있다.

innerHTML은 성능상 textContent보다 나쁘고 XSS 공격에도 취약하기 때문에 innerHTML을 사용할 경우 보안점검을 거치는 프로젝트에서는 코드가 거부될 가능성이 있다.

• 당신이 innerHTML을 쓰면 안되는 이유
• innerHTML의 위험성, XSS에 대해 알아보자

위와 같은 이유들로 꼭 필요한 경우만 innerHTML을 사용할 것!

InnerText

• 엘리먼트의 속성으로, 사용자에게 보여지는 텍스트 값만을 가져온다

<div id='my div'>
	화면에 출력될 텍스트
	<span style= 'display:none'> 숨겨진 텍스트 </span>
</div>

//<style>태그에 숨김기능이 추가되어, '숨겨진 텍스트'는 사용자가 보는 화면상에서 
//보이지 않는다. '화면에 출력될 텍스트'만 노출된다.

TextContent

• '노드'의 속성으로, innerText와달리

<div id='my div'>
	화면에 출력될 텍스트
	<span style= 'display:none'> 숨겨진 텍스트 </span>
</div>

//<script>태그는 무시하고 그저 텍스트라면 모두 가져와 출력한다.
//'화면에 출력될 텍스트'와' 숨겨진 텍스트' 가 출력된다.