Node, Element
DOM으로 html 요소를 조작할 때, 어떤 요소의 부모 요소나 어떤 요소의 자식 요소를 찾아야 할 때가 있다.
부모 요소를 찾기 위해선 parentElement와 parentNode를 사용할 수 있고,
자식 요소를 찾기 위해선 children과 childNode를 사용할 수 있다.
어떤 차이가 있는건지 궁금해져 찾아보다가 이 둘의 차이점을 정리 해 보려 한다.
- Node
- Node는 DOM 구조에 속한 객체의 어떤 타입이든 가리킬 수 있는 이름이다.
- 내장 DOM 엘리먼트나 HTML의 특정 태그(p, div 등), 텍스트, 주석도 노드에 포함이 된다.
- Element
- Element는 노드에 포함된 특정 타입이라고 할 수 있다. HTML의 태그라고 생각하면 쉽게 이해가 갈 것 같다.
결론: Node의 여러 타입 중 하나가 element 이다.
node > element
parentElement와 parentNode
- parentElement
- parentElement는 노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다. parentElement의 반환값은 언제나 DOM 요소이거나 null이다.
- parentNode가 부모가 요소인지 아닌지 따지지 않고 그냥 요소 노드를 반환해 준다면 parentElement의 경우에는 부모가 꼭 요소여야만 Element 형식으로 반환하고 그렇지 않으면 null을 반환한다는 것이다.
- parentNode
- parentNode는 DOM 트리에서 특정한 노드(주로 현재 다루고 있는 노드)의 부모 노드를 반환하는데, 이 때 parentNode는 읽기 전용 노드가 된다.
- 평상시(부모 노드가 엘리먼트인 경우)에는 거의 parentElement와 똑같은 값을 반환하나, 특수한 경우(예를 들어 현재 노드가 documentElement인 경우) 둘의 반환값이 달라진다.
결론: 노드 타입의 반환이 필요한 경우 parentNode를 사용, element만 필요한 경우라면 parentElement 사용(굳이 parentNode를 사용할 필요가 없음)
childNode와 children
둘 다 특정 노드의 children을 가져오지만, childNodes는 NodeList 형태로 가져오고 children은 HTMLCollection 형태로 가져온다.
<html>
<body>
<div>
<p>test1</p>
test2
<!-- test3 -->
</div>
</body>
</html>위와 같은 html 문서가 있을 때, 둘의 차이를 확인해 보자
const elDiv = document.querySelector('div');
elDiv.childNodes;
elDiv.children;
결론: children을 사용하면 자식 노드들 중 엘리먼트 노드만 가져오고, childNodes를 사용하면 모든 타입의 자식 노드들을 가져올 수 있다.
아무것도 모르는 코린이