[JavaScript] innerHTML, innerText, textContent 차이점

 

공통점

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

 

 

차이점

1. textContent

textContent는 식별자 노드의 내부 콘텐츠를 text/plain으로 파싱(Parsing)한 결과이다.  즉, 해당 노드가 가지고 있는 텍스트 값을 그대로 읽기 때문에 다른 프로퍼티들에 비해 파싱이 빠르다. IE 엔진에 적합하게 만들어졌기 때문에 해당 환경에서 성능이 더 좋다.

 

"만나서        반갑습니다." 로 입력되어있을 때, 연속되는 공백이 그대로 처리되어 보여진다.

 

2. innerTEXT

innerText 프로퍼티의 값은 text/plain으로 파싱한 결과이다. 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 읽어온다. 때문에 원시텍스트가 최종적으로 렌더링 된 모습이 된다.

 

"만나서        반갑습니다." 로 입력되어있을 때, 연속되는 공백을 무시하고 하나의 공백으로 처리하여 "만나서 반갑습니다" 라고 보여진다.

 

3. innerHTML

innerHTML 프로퍼티의 값 또한 text/plain으로 파싱한 결과이다. 큰 차이는 없지만 상대적으로 파싱이 느리다. 그러나 XSS 등 공격에 취약한 사례로 언급된다는 단점이 있다. 때문에 프로젝트가 보안 점검을 거치게 되는 경우, innerHTML을 사용하면 코드가 거부될 가능성이 높다.

 

 

결론

• textcontent : 해당 노드의 raw text를 얻음으로써 의도한 대로 가공할 수 있다. 성능과 보안에 강점이 있어 사용하는 것을 권장
• innerTEXT : 특정 노드에 렌더링 된 텍스트를 읽어올 때 유용. 하지만 특별히 스타일 적용이 없다면 성능상 적합하지 않다.
• innerHTML : HTML parsing이 필요한 문자열에만 사용하도록 하는 것을 권장. 공격에 취약함.