parentNode和parentElement的区别

最新推荐文章于 2023-04-27 15:35:03 发布

十假杰出青年

最新推荐文章于 2023-04-27 15:35:03 发布

阅读量455

点赞数 1

分类专栏： js 文章标签： javascript html 前端

原文链接：https://course.51qux.com/1233.html

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head> 
	<body>
		<div id="bb">
			<div class="box1"></div>
			<div class="box">
				<p title="hhhh">第1</p>
				<p dataId="2">第2</p>
				<p>第3</p>
				<p>第4</p>
			</div>
			<div class="box2"></div>
		</div>
<script type="text/javascript">  var pp = document.getElementsByClassName("box")[0]; 
</script>
 </body>
</html>

1 用法

console.log(pp.parentNode);
console.log(pp.parentElement); 
// parentNode:获取父节点
// parentElement:获取父元素

在这里插入图片描述

2 共同点

console.log(pp.parentNode.nodeName); // DIV
console.log(pp.parentElement.nodeName); //DIV
//parentNode和parentElement都可以获取父节点的所有节点属性，可以配合nodeName获取节点名字

3 唯一区别

console.log(pp.parentElement.parentElement.parentElement.parentElement.nodeName); //报错：000.html:37 Uncaught TypeError: Cannot read property 'nodeName' of null

console.log(pp.parentNode.parentNode.parentNode.parentNode.nodeName);// #document

在获取根部document节点是，parentElement找的是元素，因此报错null,而parentNode获取的是节点，返回的是#document

4 childNodes和children的区别

console.log(pp.childNodes);
console.log(pp.children);

childNodes：获取子节点——返回所有节点的数组,只返回文本和元素节点，对于属性节点直接无视
children：子元素——只返回元素节点

childNodes打印结果
在这里插入图片描述
children打印结果

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。
转载请注明来源： js中parentNode和parentElement的区别和用法 - Qui-Note