For DOM elements, children refers to sub-objects of the DOM Object type, excluding the TextNode objects that exist invisible between tags, and childNodes includes the TextNode objects that exist invisible between tags.
Look specifically at the tests for children and childNodes in the chrome environment:
<!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>
The test results are as follows:
div1.children运行结果: SPAN div1.childNodes运行结果: undefined SPAN undefined
There are two undefined nodes in the result of the childNodes collection above, and these two are TextNode with nodeType=3.
If the HTML code is written in the following style, there will be no difference in the results of children and childNodes.
<body> <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body>
No other differences were found in the actual measurement of HTML elements such as document, head, body and div
js method to get array length
The difference between static web pages and dynamic web pages
js refresh current page
js rounding
What is the difference between 4g and 5g mobile phones?
The difference between k8s and docker
The difference between JD.com's self-operated flagship store and its official flagship store
js method to delete node
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
