Dom 中 children 与childNodes 的区别

最新推荐文章于 2022-07-11 12:21:42 发布

明明是地主家的傻儿子

最新推荐文章于 2022-07-11 12:21:42 发布

阅读量2.2k

点赞数

分类专栏： js 文章标签： dom

本文链接：https://blog.csdn.net/u012532033/article/details/65448379

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<link rel="stylesheet" style="text/css" href="css/base.css" >
	
</head>
<body>
	<div id="parent">
		<span>span标签</span>
	</div>
	<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>

function getChild(parentId){
	var parentObj = document.getElementById( parentId );
	var childEles = parentObj.children;
	console.log( "children:" + parentObj.children.length );
	for (var i = 0; i < childEles.length; i++) {
		console.log( childEles[i].tagName);
	}
	var childNodes = parentObj.childNodes;
	console.log( "childNodes:" + parentObj.childNodes.length );
	for (var i = 0; i < childNodes.length; i++) {
		console.log( childNodes[i].tagName);
	}
}
window.onload = function(){
	getChild("parent");
}

children获取的是元素的实际标签直接子元素

childNodes获取的是元的所有直接子元素，包含隐藏的文本标签，其中undefined 就是隐藏的文本标签