children과 childNode의 차이
children과 childNode의 차이를 알아보기 전에
Node와 Element의 차이를 먼저 이해하고 넘어가야한다.
Node
태그노드, 텍스트노드를 모두 포함
Element
텍스트 노드를 제외, 태그(요소)를 선택
Node가 Element 보다 상위에 있다. Element는Node의자식이다.
Node > Element
childNode
노드를 선택한다. 태그노드, 텍스트노드를 모두 가리킨다.
childrend
텍스트 노드를 제외한 태그를 가리킨다.
아래의 예시의 html 파일이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<div class="test1">테스트1</div>
<div class="test1">테스트1</div>
<span class="span">스팬</span>
<div class="test2">테스트2</div>
<span class="span">스팬</span>
</body>
</html>children의 출력 결과
document.body.children
HTMLCollection(5)
[div.test1, div.test1, span.span, div.test2, span.span]childNode의 출력 결과
document.body.childNodes
NodeList(11)
[text, div.test1, text, div.test1, text, span.span, text, div.test2, text, span.span, text]