了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看《js节点都有哪些类型?怎么判断是哪种节点类型?js属性节点获取和移除,下面直接进入正题:js中parentNode和parentElement的区别和用法!

公共html代码:

<!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.用法

parentNode:获取父节点;parentElement:获取父元素

console.log(pp.parentNode);
console.log(pp.parentElement); 

2.共同点:

parentNode和parentElement都可以获取父节点的所有节点属性,可以配合nodeName获取节点名字

console.log(pp.parentNode.nodeName); // DIV
console.log(pp.parentElement.nodeName); //DIV

3.唯一区别:

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

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

4.关于childNodes和children区别

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

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

childNodes打印结果:


children打印结果: