js中parentNode和parentElement的区别和用法
时间：07-16来源：作者：点击数：
了解本篇的基础必须知道什么是节点，关于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属性节点获取和移除
下一篇:CSS绝对定位和相对定位
湘公网安备 43102202000103号