javascript offsetParent 与 parentElement 或 parentNode 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17974859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between offsetParent and parentElement or parentNode
提问by Yuriy Galanter
I have a following DOM structure
我有以下 DOM 结构
<body>
<div>
<table>
<outerElement>
<innerElement />
</outerElement>
<table>
</div>
</body>
DIV has its overflow set to auto so if table grows bigger - it scrolls within the DIV.
DIV 的溢出设置为自动，因此如果表变大 - 它会在 DIV 内滚动。
In this scenario why table.offsetParentreturns the body while both table.parentNodeand parentElementreturn the Div?
在这种情况下，为什么table.offsetParent同时返回主体table.parentNode并parentElement返回 Div？
I need to calculate current position of the innerElementwithin the window, so I traverse from it up thru all parent elements, collecting their offsetTopand offsetLeftvalues. Up until the DIV offsetParentworks fine and then it skips it directly to the body. The problem if there's scrolling involved at some point, I need to account for scrollTopand scrollLeftas well - like in the DIV in the above example. The problem is if I use offsetParentI never encounter the DIV as one of the parents.
我需要计算innerElement窗口内的当前位置，因此我从它向上遍历所有父元素，收集它们的offsetTop和offsetLeft值。直到 DIVoffsetParent工作正常，然后它直接将其跳过到正文。如果有涉及滚动在某一点的问题，我需要考虑scrollTop和scrollLeft以及-就像在上面的例子中DIV。问题是，如果我使用offsetParent我从来没有遇到过作为父母之一的 DIV。
UPDATE
更新
This is part of the code that does the traversing:
这是执行遍历的代码的一部分：
while (oElem && getStyle(oElem, 'position') != 'absolute' && getStyle(oElem, 'position') != 'relative') {
curleft += oElem.offsetLeft;
curtop += oElem.offsetTop;
oElem = oElem.offsetParent;
}
where getStyleis a custom function that in this case retrieves the position style.
wheregetStyle是一个自定义函数，在这种情况下检索位置样式。
采纳答案by Ally
Stay clear of offsetParent, you'll have to add lots of hacks and checks to ensure you get it right.
远离offsetParent，您将不得不添加大量技巧和检查以确保您做对了。
Try using getBoundingClientRectinstead.
尝试使用getBoundingClientRect代替。
回答by kalley
offsetParentis the closest parent that has position:relativeor position:absoluteor the body of the page. parentNodeis the direct parent, regardless of position.
offsetParent是具有最接近父position:relative或position:absolute或页面的主体。parentNode是直接父级，无论position.
回答by BurninLeo
Using getBoudingClientRect() is really a great help (thanks Ally for the hint!).
使用 getBoudingClientRect() 真的很有帮助（感谢 Ally 的提示！）。
If you still need the position relative to the upper left corner of the document, here's a helpful snippet:
如果您仍然需要相对于文档左上角的位置，这里有一个有用的片段：
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
}
}
Note: document.body.getBoundingClientRect()may return an unexpected value for topin Firefox under some circumstances. Therefore, the window scroll position is more robust.
注意：在某些情况下document.body.getBoundingClientRect()，top在 Firefox 中可能会返回一个意外的值。因此，窗口滚动位置更加健壮。
For the client who do not yet support getBoundingClientRect(), we still must walk the offetParents and take care that every overflow: scroll(or auto) parent has position: relative.
对于尚不支持 getBoundingClientRect() 的客户端，我们仍然必须遍历 offetParents 并注意每个overflow: scroll（或自动）父对象都有position: relative.
回答by Jim
offsetParent is essentially the parent in UI
offsetParent 本质上是UI 中的父级
parentNode is actually the parent in DATA/HTML
parentNode 实际上是DATA/HTML 中的父节点
offsetParent is included to deprecate traditional parentNode
包含 offsetParent 以弃用传统的 parentNode
