innerText vs textContent vs innerHTML

GY·2021년 8월 29일
0

메소드 정리

목록 보기
10/14
post-thumbnail

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을 사용할 것!

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>태그는 무시하고 그저 텍스트라면 모두 가져와 출력한다.
//'화면에 출력될 텍스트'와' 숨겨진 텍스트' 가 출력된다.
profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글