children과 childNodes의 차이

document.body.childNodes

NodeList(11)
[text, div.test1, text, div.test1, text, span.span, text, div.test2, text, span.span, text]

children과 childNodes의 차이

childNode는 태그노드, 텍스트노드를 모두 가리키며 children은 텍스트 노드를 제외한 태그를 가리킨다.

즉, children은 요소를 반환하며 childNodes는 text, 주석과 같은 모든 노드를 반환한다는 점이 다르다.

 

children을 출력하게 되면

childNodes는 요소의 자식이 꼭 태그가 아니어도 다 품고 있다.

document.body.children

HTMLCollection(5)
[div.test1, div.test1, span.span, div.test2, span.span]

childNodes를 출력하게 되면

children은 여러 자식들 중 요소 노드만 잡아 반환한다. 

document.body.childNodes

NodeList(11)
[text, div.test1, text, div.test1, text, span.span, text, div.test2, text, span.span, text]