这篇博客介绍了DOM树中元素和节点的区别，重点讲解了parentElement和parentNode属性的使用。当父节点为元素时，两者返回相同；否则，parentElement可能为null。示例代码展示了如何从给定元素遍历到html标签，以及计算元素到页面顶部的距离。
首先，您需要知道元素和节点之间的区别。总之，元素是一种特殊类型的节点，它表示 DOM 树中的单个节点。它不仅可以是元素，还可以是注释、文档、文本节点等。
在大多数情况下，parentElement 和 parentNode 属性返回相同的节点：
// 两者都返回 <html> 元素
document.body.parentNode
document.body.parentElement唯一的区别是，如果父节点不是元素节点，则 parentElement 属性可以为 null：
// 例外
// 返回文档节点
document.documentElement.parentNode
// 返回 null，因为 <html> 元素不存在
// 有一个父元素节点
document.documentElement.parentElement提示
通过检查父元素是否存在，我们可以从给定元素移动到 html 标签：
while (ele = ele.parentElement) {
// ...
}下面的代码段计算从给定元素到页面顶部的距离：
const distanceToTop = (ele) => {
let x = 0
while ((ele = ele.parentElement)) {
x += ele.offsetTop
}
return x
}
扫一扫
3381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
