TIL) innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.

 

innerHTML 와 textContent 메서드 모두 텍스트 값을 읽어오고, 설정할 수 있는 기능을 합니다. 

 

하지만 이 둘의 차이점은 분명합니다. 

 

먼저 innerHTML 메서드는 해당 요소에 포함된 HTML*, XML**의 전체 내용을 읽어오거나 설정할 수 있습니다. 

그래서 태그는 물론이고, HTML 코드 내의 공백까지도 출력됩니다. 하지만 XSS*** 공격 위험에 취약하다는 단점이 있습니다. 

 

 

이에 반해, textContent 메서드는 해당 요소와 그 자손의 텍스트 콘텐츠를 표시합니다. 

따라서 innerHTML 메서드와는 달리 HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋고 XSS*** 공격 위험이 없습니다. 

 

따라서 결론적으로 가급적 textContent를 사용하는 것이 좋습니다.  textContent는 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문입니다. 

 

 

 

 

*HTML은 HyperText Markup Language의 약자입니다.

우리가 이용하는 웹페이지 구조를 담당하는 마크업 언어이자 tag들의 집합으로 이루어져 있습니다. 

 

**XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.

XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다.

 

***XSS은 Cross-site scripting의 약자이고, 공격자가 웹 사이트에 악성 스크립트를 삽입하여 공격하는 것을 의미합니다. 

 

 

 

innerHTML 참고

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

textContent 참고

https://developer.mozilla.org/ko/docs/Web/API/Node/textContent

XML 참고

http://www.tcpschool.com/xml/xml_intro_basic

XSS 참고

https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting