childNodes와 children의 차이

 

지난번에 작성한 querySelector에 관해 공부하다가 childNodes와 children의 차이에 대해 추가로 궁금중이 생겨서 찾아보았다.

 

querySelector란?

 

element보다 node가 상위에 있는 관계만 알고 있다면 쉽게 접근할 수 있을 것 같다.

element는 태그 요소들을 가리키므로 children은 모든 태그를 가져온다면,

childNodes는 태그뿐 아니라 주석, 텍스트 등 모든 요소를 가져온다고 볼 수 있다. 

 

<div id="test">
    <span>cat</span>
    <!-- 주석 -->
    <span>dog</span>
</div>

<script>

let test = document.querySelector('#test');
console.log(test.children);
console.log(test.childNodes);

</script>

 

 

console을 출력했을 때

 

children은 태그만 가져오는 반면

childNodes는 공백과 주석 그리고 태그 전부를 가져오는 걸 확인할 수 있다.