children与childNodes的区别

最新推荐文章于 2024-05-13 13:37:50 发布

银贝斯

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量1w

点赞数 6

文章标签： childNodes children childNodes与children

本文链接：https://blog.csdn.net/yhn1121/article/details/52461353

版权

杂物间专栏收录该内容

19 篇文章 0 订阅

订阅专栏

乍一看感觉一样平时用的时候也没怎么留意

其实区别还是有点儿大

传言啊这个 childNodes是正统属性亲生的

而这个children是野孩子

这个野孩子比较随意所以用它返回来的就只有DOM元素了其他的文字啥的都不返回

而 childNodes比较讲究事无巨细都要返回来

但是我还是觉得野孩子乖洒脱啊所以也获得了几乎所有浏览器的支持如果你想要DOM节点直接用野孩子就可以了

感觉有点儿偏心啊

为啥偏心呢？

这个亲生娃儿childNodes心太细了啥都给你返回来了

下面我们就举个例子

首先是野孩子的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"><div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").children);
		</script>
	</body>
</html>

上面的结果只返回三个div 数组长度是3 换成childNodes也一样因为没有文本元素啊

但是别着急换种写法问题就出来了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"> <div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").children);
		</script>
	</body>
</html>

不知道有没有看出来上面两端代码的区别我在那个father后面加了个空格结果呢

childNodes就返回来了四个长度的数组 ....好吧很乖

还有更奇葩的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father">
			<div>01</div><div>02</div><div>03</div></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").childNodes);
		</script>
	</body>
</html>

不知道各位看出区别来了没有

我加了个换行符

结果又给我返回来了四个长度的数组妈呀换行也算啊

如果你说我就想用亲儿子但是呢又不想让他返回换行元素就只能按照下面这么来写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="father"
			><div>01</div
			><div>02</div
			><div>03</div
		></div>
		<script type="text/javascript">
			console.log(document.getElementById("father").childNodes);
		</script>
	</body>
</html>

好吧这还是我认识的DOM吗

算了还是要私生子好了

银贝斯

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
children与childNodes的区别

乍一看感觉一样平时用的时候也没怎么留意其实区别还是有点儿大传言啊这个 childNodes是正统属性亲生的而这个children是野孩子这个野孩子比较随意所以用它返回来的就只有DOM元素了其他的文字啥的都不返回而 childNodes比较讲究事无巨细都要返回来但
复制链接

扫一扫