2025年3月19日 星期三 甲辰(龙)年 月十八 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

js中parentNode和parentElement的区别和用法

时间:07-16来源:作者:点击数:36

了解本篇的基础必须知道什么是节点,关于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打印结果:

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门