深入了解parentNode,parentElement,childNodes,children的区别，一看就懂

最新推荐文章于 2023-05-05 15:00:24 发布

Top丶super航

最新推荐文章于 2023-05-05 15:00:24 发布

阅读量3.4k

点赞数 15

CC 4.0 BY-SA版权

文章标签： javascript js dom

本文链接：https://blog.csdn.net/weixin_44206561/article/details/108241944

本文深入解析DOM中的关键属性：parentNode, parentElement, childNodes与children。阐述它们的功能与区别，通过实例代码展示如何有效使用这些属性进行DOM节点操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。
在这里插入图片描述
parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，由上面的图可以看出属性节点是元素节点的一个分支，一般不会考虑。

一、childNodes和children的区别

1、childNodes

返回当前元素子节点的所有类型节点（包括：空格和换行符都会都会被默认成文本节点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript">
			var ul = document.querySelector('ul')
			console.log(ul.childNodes);
			console.log(ul.childNodes.length);
		</script>
	</body>
</html>

在这里插入图片描述
是不是很奇怪，为什么有这么多文本节点？我们打开看看，这些文本的内容是什么

这说明，该节点下的回车符和空格也会被childNodes当成文本节点，我们尝试着给li元素节点添加属性，我们会发现length的长度还是没有改变，也就是在说childNodes只返回文本节点和元素节点。
有些不怀好意的人会说，我不想要回车空格的文本节点，这应该怎么办呢？
那我们需要知道每个节点都会有nodeType属性

nodeType === 1 该节点为元素节点
nodeType === 2 该节点为属性节点
nodeType === 3 该节点为文本节点

我们就要用这个属性的特点来只获取元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript">
			const ul = document.querySelector('ul');
			const childNodes = ul.childNodes;
			let temp = 0;
			let newNodes = [];
			for(let i = 0; i < childNodes.length; ++i){
				if(childNodes[i].nodeType === 1){
					newNodes[temp++] = childNodes[i];
				}
			}
			console.log(newNodes);
		</script>
	</body>
</html>

在这里插入图片描述
这样就得到了我们想要的结果，其实我们还可用children属性，来实现这个功能。

2.children

返回当前元素的子元素节点（不返回文本节点和属性节点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript">
			const ul = document.querySelector('ul');			
			console.log(ul.children);
		</script>
	</body>
</html>

在这里插入图片描述
通过运行我们可以发现，只返回了元素节点，没有返回文本和属性节点

二、区别parentNode和parentElement

parentNode：和英语翻译一样，返回父节点
parentElement：返回父元素
DOM树每一部分都是由节点组成，节点是由元素节点，属性节点，文本节点三部分组成，从这里可以看出节点包含元素节点。从html中又可以知道父节点不可能是文本和属性节点。难道parentNode和parentElement返回的值都是一样的吗？不，不，不，html是根元素，document是一种特殊的节点，当当前节点的父节点是document时，parentNode返回的是#document，而parentElement返回值为空，这就是他们两最大的区别。
我光说可能会有点晕，还是上代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="parent">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript">
			const html = document.querySelector('html');			
			console.log(html.parentNode);
			console.log(html.parentElement);
		</script>
	</body>
</html>

在这里插入图片描述
这是我对parentNode,parentElement,childNodes,children四个属性的见解，欢迎大家留言