offsetParent 和 parentElement 或 parentNode 之间的区别答案

【问题标题】：Difference between offsetParent and parentElement or parentNodeoffsetParent 和 parentElement 或 parentNode 之间的区别
【发布时间】：2013-08-01 05:49:49
【问题描述】：

我有以下 DOM 结构

<body>
    <div>
       <table>
          <outerElement>
              <innerElement />  
          </outerElement>
       <table>
    </div>
</body>

DIV 的溢出设置为自动，因此如果表格变大 - 它会在 DIV 内滚动。

在这种情况下，为什么 table.offsetParent 返回正文，而 table.parentNode 和 parentElement 返回 Div？

我需要计算窗口中innerElement 的当前位置，因此我从它向上遍历所有父元素，收集它们的offsetTop 和offsetLeft 值。直到 DIV offsetParent 工作正常，然后它直接跳过它到正文。如果在某些时候涉及滚动问题，我还需要考虑scrollTop 和scrollLeft - 就像上面示例中的 DIV 一样。问题是如果我使用offsetParent，作为父母之一，我从来没有遇到过DIV。

更新

这是执行遍历的代码的一部分：

while (oElem && getStyle(oElem, 'position') != 'absolute' && getStyle(oElem, 'position') != 'relative') { 
   curleft += oElem.offsetLeft;
   curtop += oElem.offsetTop;
   oElem = oElem.offsetParent;
}

其中getStyle 是一个自定义函数，在这种情况下用于检索位置样式。

【问题讨论】：

检查你的身体是否有位置：相对

标签： javascript html dom offset

【解决方案1】：

offsetParent 本质上是 UI

中的父级

parentNode 实际上是 DATA/HTML

中的父节点

offsetParent 被包括在内以弃用传统的 parentNode

【讨论】：

欢迎堆砌，回答一个老问题。但它的答案需要最少的堆栈答案，请阅读此stackoverflow.com/help/how-to-answer 并编辑您的答案以获得最佳反馈。

【解决方案2】：

使用 getBoudingClientRect() 真的很有帮助（感谢 Ally 的提示！）。

如果您仍然需要相对于文档左上角的位置，这里有一个有用的 sn-p：

if (node.getBoundingClientRect) {
    var rect = node.getBoundingClientRect();
    var sx = -(window.scrollX ? window.scrollX : window.pageXOffset);
    var sy = -(window.scrollY ? window.scrollY : window.pageYOffset);

    return {
        x: rect.left - sx,
        y: rect.top - sy
    }
}

注意：在某些情况下，document.body.getBoundingClientRect() 在 Firefox 中可能会为 top 返回一个意外的值。因此，窗口滚动位置更加稳健。

对于还不支持 getBoundingClientRect() 的客户端，我们仍然必须遍历 offetParents 并注意每个overflow: scroll（或自动）父级都有position: relative。

【讨论】：

【解决方案3】：

远离offsetParent，你必须添加大量的技巧和检查以确保你做对了。

尝试改用getBoundingClientRect。

【讨论】：

offsetParent 非常有用并且使用得当，您将不需要“大量黑客”
@Mackelito 据我所知，它很难处理折叠边距，使用getBoundingClientRect 更容易。

【解决方案4】：

offsetParent 是具有position:relative 或position:absolute 或页面正文的最近父级。 parentNode 是直接父级，与 position 无关。

【讨论】：

不完全是，我用更多细节更新了这个问题。从技术上讲，我正试图准确地获得innerElement 的位置，并且它的许多父母都是静态的。