본문 바로가기

javascript

innerText 와 innerHTML 가 뭐죠? textContent 는 뭐에요?

 

태그이름 속성
innerText  태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : <태그>(텍스트)</태그> => 텍스트만 바뀜)

사람이 읽을 수 있는 요소만 보여주기 때문에, 화면에 보이는 그대로의 텍스트를 읽어올 때는 유용하다.
하지만 내부에 특별한 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않다.
innerHTML  태그 자체를 가져오거나 바꾸는 기능 (바뀌는 범위 : (<태그>텍스트</태그>) => 전체 다 바뀜)

보안에 취약하다는 단점이 있다.
textContent
해당 요소 내부의 원시 텍스트를 보여주기 때문에 다른 프로퍼티들에 비해 파싱이 빠르다.
가급적 textContent를 사용하는 것이 좋은데 성능과 보안에 강점이 있고, 원시 텍스트를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문이다.

 

반응형