children과 childNodes는 자바스크립트에서 특정 요소의 자식 요소/노드에 대해서 접근할 수 있게 해주는 프로퍼티다. 이 둘의 차이는 무엇일까?
그러려면 일단 요소와 노드의 차이부터 알아야겠다. 결론부터 얘기하자면 node는 element(요소)의 상위 개념이다. DOM 트리구조의 모든 것이 다 node이고, 그 중 element는 html 문서에서 <body>, <div>, <input>, <ul>, <li> 등과 같은 태그를 사용해서 작성된 노드이다.
늘 그렇듯 말로 푸는 설명이 더 어렵기 때문에 바로 예제를 살펴보자.
<html>
<body>
<div id="nav">
<!-- 테스트 주석 -->
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="profile-photo">photo</div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture">news-picture</div>
<div class="news-title">news-title</div>
<div class="news-description">news-description</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
이 중에서 id가 nav인 <div> 태그를 가져와 해당 요소의 children과 childNodes를 살펴보자.
콘솔에 찍어보기 전에 HTML 마크업을 먼저 살펴보면 $nav 아래에는 div.logo와 div.menu-wrapper가 있다.
한 눈에 보이는 가장 큰 차이는 children은 HTML Collection이고, childNodes는 NodeList라는 점이다. 그리고 그 안에 담긴 요소의 개수가 다르다. children에 담긴 div.logo와 div.menu-wrapper가 우리가 html 문서를 봤을 때 바로 알아차릴 수 있는 요소이다.
그럼 대체 childNodes 안에는 뭐가 담겨 있는 건지 열어서 살펴보자.
div.logo와 div.menu-wrapper 사이에 text와 comment가 보인다.
텍스트부터 열어보니 단순히 "\n " 문자열이 담겨 있다. 개행문자인 것이다.
위의 html 마크업으로 다시 돌아가보면 일부러 주석 한 줄을 테스트 삼아 넣어놨는데, 바로 그 주석이다.
여기에서 한 가지 주목해야 할 property가 있는데 바로 nodeType이다. 텍스트의 nodeType 값은 3이고, 주석의 nodeType 값은 8이다. 그렇다면 우리에게 필요한 element node의 nodeType 값은 얼마일까?
div.logo는 위의 텍스트나 주석과 달리 너무 많은 프로퍼티를 가지고 있어서 한 화면에 전부 다 담기가 어렵다. 그래도 nodeType 값만 살펴보면 1인 것을 확인할 수 있다. 그리고 nextElementSibling은 div.menu-wrapper이지만, nextSibling은 text인 것도 같이 확인할 수 있다.
그렇다. element는 nodeType 값 1을 가지고 있는, node 중에서 특별한 node인 것이다.
오늘의 주제인 children과 childNodes의 차이는 사실 그 이름에 이미 답이 담겨 있다. childNodes는 해당 부모 요소의 모든 childNodes가 담긴 NodeList이며, children은 전체 Node 중에서 element node만 HTML Collection에 따로 담아주는 프로퍼티다.
💡 결론
우리가 DOM을 통해 CRUD 하고 싶은 것은 주로 element인 경우가 99.9%일 것이기에 자식 요소에 접근하기 위해서는 children을 사용하면 되겠다.
'배워서 남 주자' 카테고리의 다른 글
| 화살표 함수를 쓸 때 주의할 점 (1) | 2022.11.24 |
|---|---|
| li 요소는 왜 ul 요소의 자식 요소여야만 할까? (0) | 2022.11.16 |
| 배열 reduce 메소드 - array.reduce() (0) | 2022.11.08 |
| 변수, 선언, 할당, 메모리 그게 다 뭔데? (부제: 원시자료형과 참조자료형의 차이) (1) | 2022.11.07 |
| 배열과 객체 순회 (0) | 2022.11.06 |