js DOM parentElement parentNode - Kaiqisan

js DOM parentElement parentNode

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,这篇文章不完全算是我的原创文章，有相当一部分是从别的网站借鉴来的，我也没想到表面看上去这样一个简单的问题深究起来会这么复杂。

parentElement: 获取当前元素的父对象的所有信息

<ul class="list">
	<li>
        标题
		<div class="demo2">🐖🐖🐖🐖🐖🐖🐖</div>
		<div class="demo">app</div>
	</li>
	<li>Sam</li>
	<li>Lily</li>
</ul>

let a = document.getElementsByClassName('demo')[0]
console.log(a.parentElement)

最终输出一个对象，且为父对象.

parentNode: 从获取内容上面来看，它获取之后返回的内容无论是数据类型还是内容，都是完全一样的。这不禁使我开始疑惑，他们俩到底有什么区别，如果它们俩被创造出来了，存在即合理，就一定有什么不一样的地方。

通过我网上的找的资料，发现了一些不一样的点 友情链接1 友情链接2

• parentNode和parentElement，前者是w3c标准，后者只ie支持，并且在ie中，不支持文本节点（text）使用parentElement查看父节点,结果会返回undefined.
• parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。element是包含在node里的，它的nodeType是1。

console.log(document.body.parentNode.parentNode) 
// 返回 #document，为总节点，是所有html元素包括头文件的整合

PS：这里的第一个parentNode获取了 body的父标签html标签的所有信息。这等同于document.documentElement

console.log(document.body.parentElement.parentElement) // 返回null,

由于使用parentElement获取的是父节点的Element 对象，parentNode获取的是父节点的Node对象，在这里所有的element对象也是node对象，但，有一个对象非常特殊，就是这个document,他它是node对象，但不是element对象，所以上面的步骤中

// document.body.parentNode 
// document.body.parentElement

这两部其实是完全一样的，获取来的东西是完全一样的，都是html标签的信息。

由于document对象的特殊性，导致parentElement无法获取document对象，所以返回为null。

如果您想要验证其真实性，可以打开元素的原型链一看究竟,下面是我给出的两个参考

console.log(document.__proto__) 
// document原型是document,它的原型的原型是Node
console.log(document.body.__proto__) 
// 它的原型是HTMLElement,它的原型的原型是Element,它的原型的原型的原型是Node

总结

在日常是使用中，这俩方法是几乎没有任何区别的，只要目的达到了就ok了。在一些点击事件中元素的溯源的时候会用到，比如说点到非框内触发事件，就是需要判断被点击元素的父节点是否符合条件；否则就会用到判断鼠标点击坐标，又麻烦又不一定准确。