[JavaScript] innerHTML, innerText, textContent

1. innerHTML

• 먼저 innerHTML은 'Element'의 속성으로, element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.
• 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다.

<div id="myDiv">Hello, World!</div>

• 위의 코드에서 id가 myDiv인 요소의 내용을 변경해보자.

document.getElementById("myDiv").innerHTML = "안녕하세요~!";

• 위 코드를 실행하면 Hello, World!가 안녕하세요~!로 변경되는 것을 확인할 수 있다.

// html 코드와 함께 작성 가능
document.documentElement.innerHTML = "<p>innerHTML</p>"
// 스타일 적용
document.documentElement.innerHTML = 
  "<span style='color:blue'>innerHTML</span>"

// 이런 식으로 빈 문자열을 넣으면 body의 전체 내용을 지울 수 있다.
document.body.innerHTML = "";

 

innerHTML은 유용한 메서드이고, 자주 사용하지만 치명적인 단점이 있다.

 

📌 innerHTML의 단점

innerHTML은 XSS(Cross-Site-Scripting) 공격에 취약하다.

 

❓ XXS란?

• XSS는 악의적인 목적을 가진 이가 웹사이트에 악성 스크립트를 주입하는 행위를 말한다.
• 사용자의 입력을 받기 위해 만들어진 input, textarea와 같은 창에서 누군가가 스크립트를 작성하고,  그 스크립트가 innerHTML과 연결되어 파싱을 거친 뒤 코드단에 주입되면, 관리자가 예상하지 못한 결과가 발생할 수 있다.
• 스크립트 내용에 따라서 쿠키나 세션 토큰 등의 탈취가 가능해서, 이를 인증이나 세션관리에 사용하고 있는 사이트에 침입하거나 심각한 피해를 입힐 가능성이 있다.

---

2. innerText

• innerText는 'Element' 속성으로, element 내에서 사용자에게 보여지는 text 값들을 가져오거나 설정할 수 있다.

// innerHTML과 달리 text값만 다루기 때문에 html태그 사용 불가능
document.documentElement.innerText = "innerText"

// html태그를 넣으면 태그도 text값으로 인식하고 
// <p>innerText</p> 문자열 그대로 적용함.
document.documentElement.innerText = "<p>innerText</p>"

• innerHTML과 innerText 비교

const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT)
// 스타일 적용되지 않은 기본 폰트로 <div style='color:red'>innerText</div> 출력

const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH)
// 스타일 적용된 빨간색 폰트로 innerHTML 출력

 

---

3. textContent

• textContent는 'Node'의 속성으로, 사용자에게 보여지는 text 값만 읽어오는 innerText와는 달리 <script>나 <style> 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.
  
  

html

<div id='content'>
  안녕~ 
  <span style='display:none'>innerText는 나를 볼 수 없어😏</span>
</div>

 

 

script

const content = document.getElementById('content');

console.log(content.innerHTML);
// html 전체를 다 가져옴

// 안녕~ 
// <span style='display:none'>innerText는 나를 볼 수 없어😏</span>

-----------------------------------------------------
  
console.log(content.innerText);
// 사용자에게 보여지는 텍스트만 가져옴
// 숨겨진 텍스트는 사용자에게 보여지지 않기 때문에 안녕~만 가져옴

// 안녕~

-----------------------------------------------------
  
console.log(content.textContent);
// 숨겨진 텍스트까지 포함해서 텍스트값을 모두 다 가져옴

// 안녕~
// innerText는 나를 볼 수 없어😏

 

---

따라서, innerHTML과 innerText와 textContent 차이는
innerHTML은 요소 내에 있는 HTML과 XML 모두를 의미하고,
innerText는 요소 내에서 사용자에게 보여지는 text를 의미하고,
textContent는 script와 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다.