/**
* TODO: 사용자 정보를 받아와 이름을 #answer에 표시해 보세요.
*/
// (1) innerText를 사용
document.getElementById('answer').innerText = userInfo.name
// (2) textContent를 사용
document.getElementById('answer').textContent = userInfo.name
05/08 온라인 멘토링 중 HTML 요소를 제어하는 퀴즈가 있었는데, 각자 구현한 방법이 다른 것을 보고 innerText와 textContent의 차이를 알아보고자 함 🤔
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
HTMLElement 인터페이스의 속성
요소와 자손의 렌더링 된 텍스트 콘텐츠를 나타내는 속성
innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다) - https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
렌더링 결과를 반영하기 때문에 값을 읽을 때 리플로우가 발생한다고 함 👎
https://developer.mozilla.org/ko/docs/Web/API/Node/textContent
Node 인터페이스의 속성
<aside> 💡
Node, Element, HTMLElement
Node는 주석, CData 등을 포함한 모든 노드 타입을 아우르는 인터페이스
(노드 종류는 Node.nodeType 문서에서 확인할 수 있다)
Element는 HTML 요소나 XML 요소를 의미하는 인터페이스
HTMLElement는 HTML 태그를 의미하는 인터페이스
상속 구조는 다음과 같음
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
</aside>
노드와 자손의 모든 텍스트 콘텐츠를 나타내는 속성
<script> 나 <style>이 있으면 이것도 내용에 포함함화면에서 숨겨진 자손을 포함한 경우
<div>
<p style="display:none">숨겨진 텍스트</p>
텍스트
</div>
➡️ “숨겨진 텍스트”는 화면에서 숨겨진 값이므로, innerText에는 포함되지 않지만 textContent에는 포함된다
시각적으로 렌더링 되지 않는 자손을 포함한 경우
// (2)
<div id='parent'>
<style> p { color: red; } </style>
<p>텍스트</p>
</div>
➡️ style 태그의 내용은 시각적으로 렌더링 되지 않는 값이므로, innerText에는 포함되지 않지만 textContent에는 포함된다
마크업 구조에 따른 차이
// (A)
<div>
<p>자식 요소의 텍스트</p>
</div>
// (B)
<div><p>자식 요소의 텍스트</p></div>
➡️ (A)과 (B)는 구조는 다르게 작성되었지만, 렌더링 결과는 동일한 마크업이다.
이때 innerText는 화면의 텍스트를 기준으로 계산하므로 동일한 값을 반환하지만,
textContent는 개행, 공백 등 구조적 차이가 반영되어 서로 다른 값을 반환한다.
<aside> 💡
“구조적 차이를 반영한다”는 뜻
// (A)
// NodeList(3) [text, p, text]
<div>
<p>자식 요소의 텍스트</p>
</div>
// (B)
// NodeList [p]
<div><p>자식 요소의 텍스트</p></div>
위의 예시에서 각각의 childNodes 필드를 확인해 보면, (A)의 노드 개수가 더 많다.
이는 div와 p 태그 사이의 공백, 개행 문자가 Text 노드로 처리되기 때문이다
(p 태그의 뒤에 있는 개행도 마찬가지)
이런 식으로!!!!!
</aside>
