DOM 요소의 경우 children은 태그 사이에 보이지 않는 TextNode 객체를 제외하고 DOM Object 유형의 하위 객체를 참조하며, childNodes에는 태그 사이에 보이지 않는 TextNode 객체가 포함됩니다.
Chrome 환경에서 어린이 및 childNodes에 대한 테스트를 구체적으로 살펴보세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1" class="div">
<span id="s1" class="sp" lang="zh-cn">
</span>
</div>
</body>
<script type="text/javascript">
function test() {
var o = document.getElementById("div1");
var child = o.children;
console.log("div1.children运行结果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
console.log("");
child = o.childNodes;
console.log("div1.childNodes运行结果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
}
test();
</script>
</html>
테스트 결과는 다음과 같습니다.
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
위의 childNodes 컬렉션 결과에는 정의되지 않은 두 개의 노드가 있으며, 이 두 개는 nodeType=3인 TextNode입니다.
HTML 코드를 다음과 같은 스타일로 작성하면 children과 childNodes의 결과에는 차이가 없습니다.
<body> <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body>
문서, 머리글, 본문, div 등 HTML 요소의 실제 측정에서는 그 외 차이점은 발견되지 않았습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
