js parentElement和offsetParent之间的区别

js parentElement和offsetParent之间的区别

在使用 JavaScript 操作 DOM（文档对象模型）时，我们经常会遇到 parentElement 和 offsetParent 这两个属性，这两个属性都可以用来访问一个元素的父级元素。虽然它们看起来很相似，但它们有着不同的工作方式和用途。

parentElement

parentElement 属性可返回指定元素的父级元素，该属性与 parentNode 属性类似，但它只返回元素节点的 HTML 元素对象，而不返回任何其他类型的节点。

示例代码：

<div id="parent">
  <div id="child"></div>
</div>

const child = document.getElementById('child');
const parent = child.parentElement;
console.log(parent); // 输出 <div id="parent"></div>

在本例中，child 元素是 parent 元素的一个子元素，我们使用 child.parentElement 获取 parent 元素，输出结果将为 parent 元素本身。

offsetParent

offsetParent 属性也能返回指定元素的最近的有定位的祖先元素，这个有定位的祖先元素指的是定位方式为 relative、absolute 或 fixed 的元素，另外，如果当前元素的祖先元素中没有定位方式为 relative、absolute 或 fixed 的元素，则该元素的 offsetParent 为根元素。

示例代码：

<style>
  #parent {
    position: relative;
  }
  #child {
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>

<div id="parent">
  <div id="child"></div>
</div>

const child = document.getElementById('child');
const offsetParent = child.offsetParent;
console.log(offsetParent); // 输出 <div id="parent"></div>

在本例中，child 元素的 offsetParent 为 parent 元素，因为 parent 元素有一个定位方式为 relative 的属性。

区别

• parentElement 属性只能访问最近的 HTML 元素父级，而 offsetParent 属性则返回最近的已定位（position 为 relative、absolute 或 fixed）的祖先元素，如果都没有定位的祖先，则返回根元素。
• offsetParent 属性对于定位有特殊要求，只有当定位的值是 relative、absolute 以及 fixed 之一时才有用。而 parentElement 属性无此要求。
• 可以通过设置 CSS 的 visibility 或 display 属性来影响 offsetParent 的值，但是 parentElement 的值不受影响。

总之，这两个属性在不同场景中有着不同的使用方式，开发者需要根据实际的需求来合理选择它们。