Node와 Element의 차이에 대해 설명해주세요.
🌳 DOM의 가족관계: Node vs Element 완벽 이해하기!
안녕하세요! 오늘은 프론트엔드 개발에서 헷갈리기 쉬운 Node와 Element의 차이에 대해 알아보겠습니다 🚀
🤔 DOM이 뭐길래?
웹페이지를 가족 족보처럼 생각해보세요! 📜
HTML 문서는 하나의 큰 가족 트리이고, 이 트리의 모든 구성원들이 바로 Node예요!
👥 Node: DOM 가족의 모든 구성원
개념
DOM 트리를 구성하는 모든 요소들의 총칭이에요! 🌳
Node의 가족 구성원들
- Document Node 📄: 집안의 대가족 (HTML 전체 문서)
- Element Node 🏷️: 실제 가족 구성원 (<div>, <p> 등 태그)
- Text Node 📝: 가족의 대화 내용 (텍스트)
- Comment Node 💭: 가족의 속삭임 (주석)
- Attribute Node 🏷️: 가족의 특징 (속성들)
실생활 예시
<div class="family">
할아버지가 말씀하셨다
<!-- 이건 비밀이야 -->
<span>손자의 대답</span>
</div>
이 HTML에서:
- <div> → Element Node 👨👴
- "할아버지가 말씀하셨다" → Text Node 💬
- <!-- 이건 비밀이야 --> → Comment Node 🤫
- <span> → Element Node 👶
- "손자의 대답" → Text Node 💬
모든 것이 Node예요! 🎯
🏷️ Element: Node 가족 중 태그만!
개념
Node 중에서 HTML/XML 태그로 표현되는 멤버들만을 말해요!
특징
- 모든 Element는 Node ✅
- 모든 Node가 Element는 아님 ❌
- HTML 속성을 가질 수 있어요 (id, class, style 등)
- 다양한 Element 전용 메서드 사용 가능
카페 메뉴판 예시 ☕
<div class="menu">
<h1>오늘의 메뉴</h1>
아메리카노 <!-- 이건 텍스트 -->
<span class="price">4000원</span>
</div>
- Element들: <div>, <h1>, <span> 🏷️
- Text Node: "오늘의 메뉴", "아메리카노", "4000원" 📝
- Comment Node: <!-- 이건 텍스트 --> 💭
Element는 실제 메뉴 항목(태그)이고, Text Node는 메뉴 설명(내용)이에요!
🔍 핵심 차이점들
1️⃣ 속성 사용 가능 여부
Element만 가능한 것들 🏷️
- innerHTML - HTML 내용 조작
- classList - CSS 클래스 조작
- style - 스타일 직접 변경
- getAttribute() - 속성 값 가져오기
Node 모두 가능한 것들 🌳
- textContent - 텍스트 내용
- parentNode - 부모 찾기
- childNodes - 모든 자식들
2️⃣ 자식 요소 가져오기의 차이
childNodes (Node 속성) 🎒
- 모든 자식을 다 가져와요!
- Element + Text + Comment 전부!
- 공백까지 Text Node로 인식해요
children (Element 속성) 👨👩👧👦
- Element인 자식만 가져와요!
- 텍스트나 주석은 제외!
- 실제 태그만!
카톡 대화방 예시 💬
<div class="chat">
안녕하세요!
<span class="emoji">😊</span>
<!-- 읽음 표시 -->
오늘 뭐해요?
<span class="time">14:30</span>
</div>
- childNodes: 텍스트 + <span> + 주석 + 텍스트 + <span> (총 5개!)
- children: <span> + <span> (총 2개!)
🛠️ React에서의 실제 활용
JSX에서 주의할 점
// 이렇게 하면 Text Node도 포함돼요!
const allNodes = ref.current.childNodes;
// Element만 필요하다면
const onlyElements = ref.current.children;
useRef로 DOM 조작할 때
- Element 메서드: querySelector(), classList.add()
- Node 메서드: appendChild(), removeChild()
💡 개발자가 알아야 할 실무 팁
디버깅할 때 🐛
- 개발자 도구에서 모든 것이 Node로 표시돼요
- 하지만 속성은 타입별로 다르게 나타나요
성능 최적화 ⚡
- children (Element만) > childNodes (모든 Node)
- 불필요한 Text Node 순회 방지!
이벤트 처리 🎯
- Event Delegation: Element에만 이벤트 리스너 추가
- Text Node에는 직접 이벤트 리스너 불가
📚 알아두면 좋은 추가 정보
Node 타입 번호 🔢
- Element Node: 1
- Text Node: 3
- Comment Node: 8
- Document Node: 9
DOM API 차이점
- querySelector() → Element 반환
- createTextNode() → Text Node 반환
- appendChild() → 모든 Node 가능
Next.js에서 활용
- SSR 시: 서버에서 Text Node도 렌더링
- CSR 시: 클라이언트에서 Element 조작 주로 사용
- Hydration: Node와 Element 매칭 중요!
📝 면접 답변
"Node는 DOM 트리를 구성하는 모든 요소의 기본 단위이고, Element는 Node의 한 종류로 HTML 태그를 나타냅니다. 모든 Element는 Node이지만, Text Node나 Comment Node처럼 Element가 아닌 Node도 있습니다. childNodes는 모든 자식 Node를 반환하고, children은 Element인 자식만 반환하는 차이가 있습니다."
Node와 Element의 차이에 대해 설명해주세요.
Node와 Element의 핵심적인 차이점에 대해 설명드리겠습니다.
Node는 DOM을 구성하는 가장 기본적인 구성 단위입니다. Node에는 여러 가지 타입이 존재합니다. "Document Node"는 HTML 문서 전체를 나타내는 루트 노드이며, "Element Node"는 HTML 태그를 나타내고, "Text Node"는 텍스트 내용을, "Comment Node"는 주석을 나타냅니다. 이처럼 Node는 DOM 트리의 모든 구성 요소를 포함하는 포괄적인 개념입니다.
반면 Element는 Node의 특정 타입 중 하나로, HTML이나 XML 태그로 표현되는 객체를 의미합니다. 쉽게 말해, 모든 Element는 Node이지만, 모든 Node가 Element인 것은 아닙니다. Element는 id, class, style과 같은 HTML 속성을 가질 수 있으며, querySelector()나 getElementsByClassName()과 같은 메서드를 사용할 수 있다는 특징이 있습니다.
예를 들어 <div>Hello<!--주석-->World</div>라는 HTML이 있다면, div 태그는 Element Node이면서 동시에 Node입니다. 반면 'Hello'와 'World'라는 텍스트는 Text Node이며, 주석은 Comment Node입니다. 이들은 모두 Node이지만 Element는 아닙니다.
Node와 Element의 차이와 관련된 구체적인 예시를 들어주세요. 🤔
예를 들어, textContent라는 속성은 Node의 속성이므로 모든 종류의 Node에서 사용할 수 있지만, innerHTML은 Element의 속성이므로 Element에서만 사용할 수 있습니다.
또한, childNodes와 children 속성에도 중요한 차이가 있습니다. Node의 속성인 childNodes는 주어진 요소의 모든 자식 Node를 포함하는 NodeList를 반환합니다. 여기에는 Element뿐만 아니라 모든 종류의 Node가 포함됩니다. 따라서 HTML 태그뿐 아니라 텍스트, 주석도 childNodes에 포함됩니다. 반면 Element의 속성인 children은, Element 타입의 자식 노드만을 포함하는 HTMLCollection을 반환합니다. 여기에는 텍스트 노드나 주석 노드는 제외되고 HTML 요소 노드만 포함됩니다.