JS中parentNode和parentElement的区别

参考文章

以一个网页作为例子：

<!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>

输出pp：

分别输出parentNode和parentElement：

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

拓展：
查找两个节点的最近的一个共同父节点，可以包括节点自身
（oNode1 和 oNode2 在同一文档中，且不会为相同的节点）

（父节点的父节点也算父节点，意思是父节点不止一个）

function commonParentNode(oNode1, oNode2) {while(true){if(oNode1.contains(oNode2))return oNode1oNode1 = oNode1.parentNode}
}

不断循环oNode1的父节点，若其包含oNode2，则该节点为最近父节点

JS中parentNode和parentElement的区别相关推荐

js中parentNode和parentElement的区别和用法
了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...
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方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
js中几个对象的区别和用法
js中几个对象的区别和用法今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
js中click()与onclick()的区别
由一个简单示例到 js中click()与onclick()的区别之前朋友在学习js的时候遇到一个有意思的问题. 先贴一份代码说一下代码构成这里是html结构 <ul><li> ...
js中函数和方法的区别:转载于黑泽君
js中函数和方法的区别在javascript中的解释为: 函数(function)是可以执行的javascript代码块,由javascript程序定义或javascript实现预定义.函数可以带 ...

JS中parentNode和parentElement的区别

JS中parentNode和parentElement的区别相关推荐

最新文章

热门文章