JS / 02 / 기초-9 中 innerText, textContent, innerHTML

<div id="example">
    This is <span style="display: none;">hidden</span> content.
</div>

// 요소 선택
const exampleDiv = document.getElementById('example');


// innerText 예시
console.log("innerText:", exampleDiv.innerText); // 출력: This is content.


// textContent 예시
console.log("textContent:", exampleDiv.textContent); // 출력: This is hidden content.


// innerHTML 예시
console.log("innerHTML:", exampleDiv.innerHTML); // 출력: This is <span style="display: none;">hidden</span> content.

* textContent : 모든 텍스트 반환

• HTML 구조와 상관없이(텍스트를 숨긴다는 속성)
  해당 하는 요소의 모든 텍스트를 가져옴

• 위 예시 보면, display:none; 했지만, 무시하고, 해당 요소 텍스트 다 가져옴

* innerText : 눈에 보이는 텍스트 반환

• 실제로 눈에 보이는 텍스트만 반환

• 실제로 보이지 않는(CSS 스타일 반영)

• 렌더링 된 화면에 텍스트 가져올 때 사용 (JS로 가져올때)

✅ 렌더링 : 웹 페이지에서 HTML, CSS 및 JS코드를 이용하여
웹 브라우저에 보여지는 사용자 인터페이스(UI)를 생성하는 과정

* innerHTML : 태그+텍스트 모두 반환

• 속성+태그+텍스트 모두 '텍스트'로 반환
• XXS 공격에 취약

XXS : 웹사이트에 악의적 코드 넣어서, 해킹하는 거