textContent, innerHTML, innerText 특징과 차이점

mason.98·2022년 1월 7일
0

CS

목록 보기
2/3
post-thumbnail

📂 Element.innerHTML

HTML 내에 텍스트를 동적으로 변경할 때 사용되며 Element의 속성이다.
값에 태그들을 삽입하면 자동으로 인식한다.

Element.innerHTML = '<h1>test</h1>';

📂 Element.innerText

HTML 내에 텍스트를 동적으로 변경할 때 사용되며 htmlElement의 속성이다.
<script>, <style>의 영향을 받으며, 불필요한공백을 제거한다.

htmlElement.innerText = '불필요한 공백은 제거하며, style:none 있다면 안보입니다.';

📂 Node.textContent

HTML 내에 텍스트를 동적으로 변경할 때 사용되며 Node의 속성이다.
<script>, <style> 은 무시하고, 띄어쓰기, 공백 등을 제거하지 않는다.

Node.textContent = `
	띄어쓰기와 
	엔터도 출력 가능	합니다!
`;

🔍 textContent와 innerText의 차이점

diffrent
위와 같이 textContentstyle, script 태그를 무시하지만
innerText의 경우는 사용자에게 보여지는 최종 렌더링된 텍스트를 보여준다.


🔍 사용자에게 받은 텍스트를 처리할 때

innerHTML으로 받게 된다면 XSS 공격에 취약하다.
사용자가 입력할 때, script 태그를 이용하여 위험한 코드를 넣을 수도 있기 때문이다.
따라서 제일 안전한 방법은 태그를 무시하는 textContent를 사용하는 방법이다.


🔍 부분적인 변경이 많이 일어난다면

innerHTML을 사용하게 된다면 DOMTree부터 RenderTree를 자주 생성하게 되므로
사이트의 성능이 떨어질 수 있다.
따라서 부분적인 변경이 많은 코드라면 textContent, innerText를 사용하는 편이 좋을 것 같다.


🔍 입력 후에 변경이 없다면

innerHTML을 통하여 한번에 작성하는 것을 고려할 수 있다. 다음은 예시이다.

<예시>
section 태그 아래에 새로운 태그를 생성하고 싶다.
새로운 태그는 h4이며, 클래스명은 title이다. text로는 'h4h4h4'를 넣고 싶다.

textContent 사용시 😎

const section = document.querySelector("section"); // section 태그
const h4 = document.createElement('h4'); // 새로운 h4 태그
h4.setAttribute('class', 'title'); // h4 태그에 title 클래스 추가
h4.textContent = 'h4h4h4'; // h4 태그에 text 추가

section.appendChild(h4); // section 태그아래에 h4 태그 추가

innerHTML 사용시 😎

const section = document.querySelector("section"); // section 태그
section.innerHTML = '<h4 class="title">h4h4h4</h4>'; // section 태그 밑에 새로운 태그 추가

위와 같이 innerHTML을 사용하는 것이 작성하는데에 있어선 더 편하다.


😊 따라서

간단한 텍스트를 가져오거나 입력하는 것은 큰 차이가 없을 수 있지만
디테일적인 부분에서 차이가 생기므로, 고려하여 사용하는 것이 필요하다.


https://hianna.tistory.com/483
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
https://academy.dream-coding.com/courses/browser101

profile
wannabe---ing

0개의 댓글