0
点赞
收藏
分享

微信扫一扫

js中parentNode和parentElement的区别和用法

烟中雯城 2022-09-14 阅读 170


了解本篇的基础必须知道什么是节点,关于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);



js中parentNode和parentElement的区别和用法_java


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打印结果:



js中parentNode和parentElement的区别和用法_dom_02


children打印结果:



js中parentNode和parentElement的区别和用法_dom_03



版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 ​​原始出处​​ 、作者信息和本声明。否则将追究法律责任。


举报

相关推荐

0 条评论