innerText,innerHTML,textContent 의 차이점

innerHTML
display:none으로 지정한 요소, 자식 요소의 element tags, 모든 스페이싱(띄어쓰기), 줄 바꿈이 그대로 출력된다.
세 가지 중에서 가장 추천하지 않는 속성이다
프로퍼티의 값은 text와 html로 파싱 한 결과이며 다른 속성에 비해 상대적으로 파싱이 느리다
하지만 파싱이 느리다는 점 보다 더 큰 문제는 보안 취약성 문제이며,
XSS의 취약 사례로 언급이 되기도 했었다.

XSS공격이란 무엇인가?
크로스 사이트 스크립팅(Cross Site Scripting, XSS)은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다

innerText
text, plain으로 파싱한 결과이며 element tags 없이 딱 텍스트만 나온다.
만약 여러 번 중복되는 스페이싱이 존재한다면 딱 한 번만 나오며, 줄 바꿈은 따로 적용되지 않는다
innerText는 IE8이하에서 지원되지 않았던 TextContent와 달리 IE엔진에 적합한 속성이기 때문에
다른 브라우저가 아닌 IE를 중점적으로 고려하는 경우 TextContent를 대신하거나,
화면에 있는 텍스트 그대로 읽어오고 싶을 때 사용하기에 괜찮다

TextContent
위의 innerText처럼 프로퍼티가 text, plain으로 파싱 한 결과이며 element tags 없이 텍스트만 나온다
여기까지만 보면 innerText와 같아 보이지만, 여러 번 중복되는 스페이싱과 줄 바꿈 모두 그대로 적용이 된다.
또한 노드가 갖고 있는 모든 텍스트를 읽어오기 때문에 display:none; 의 속성을 준 텍스트도 읽어온다
세 가지 속성 중 가장 사용을 추천하는 속성이며, 성능이나 보안적인 측면에서 가장 뛰어나다