js中parentNode和parentElement的区别和用法

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

转载请注明来源：js中parentNode和parentElement的区别和用法 - Qui-Note

js中parentNode和parentElement的区别和用法相关推荐

JS中parentNode和parentElement的区别
参考文章以一个网页作为例子: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
js中几个对象的区别和用法
js中几个对象的区别和用法今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...
JS中some和every的区别和用法
some和every是数组中迭代的方法相同点:some和every都有三个参数,即item→当前项,index→当前的索引值,array→数组本身:都可以遍历数组不同点: some相当于逻辑关系中 ...
Js中apply与call的区别与用法
解析: apply与call是更改对象的内部指针,即改变对象的this指向的内容. call与apply的第一个参数都是要传入给当前对象的对象,及函数内部的this.后面的参数都是传递给当前对象的参数 ...
return true Java_[Java教程]js中return,return true,return false的用法及区别
[Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果语法为:retu ...
Js中的style,currentStyle,getComputedStyle()区别
Js中的style,currentStyle,getComputedStyle()区别样式表有三种方式: 1.内嵌样式(inline Style)-是写在Tag里面的,内嵌样式只对所有的Tag有效 ...
JS中 let 和var的区别
JS中let和var 的区别简单介绍let var的常见变量提升 ES6可以用let定义块级作用域变量 let配合for循环的独特应用 let没有变量提升与暂时性死区 let变量不能重复声明简单介 ...
uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...