JavaScript가 DOM elements_javascript 기술을 작동할 때 childNodes와 자식의 차이점
- WBOY원래의
- 2016-05-16 16:06:381254검색
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 요소의 실제 측정에서는 그 외 차이점은 발견되지 않았습니다
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.