有效地查找出现在指定DOM元素上的DOM元素

Question

如何有效地查找指定查询元素之上的所有DOM元素？

也就是说,我想要一个Javascript函数,当我传入对DOM元素的引用时,将返回与输入元素具有非零重叠并在视觉上方显示在其上方的所有DOM元素的数组.我的具体目标是找到那些可能在视觉上阻挡其下方元素的元素.

上下文是我没有网页,查询元素或其他任何东西的高级知识的上下文.出于各种原因,元素可以出现在其他元素之上.

我当然可以通过对DOM的详尽搜索来做到这一点,但是当DOM树变大时,这非常低效且不实用.我还可以使用较新的elementFromPoint从查询元素中对位置进行采样,以确保它确实位于顶部,但这似乎效率很低.

关于如何做得更好的任何想法？

谢谢!

Answer 1

我想不出比使用 elementFromPoint 更简单的方法。您似乎不想使用它，但可以给您一些一致的结果。\n如果存在多层元素，您应该调整代码以移动已抓取的元素或将它们设置为不可见并调用函数以获取新的数据集元素。

\n\n

对于基本思想：

\n\n

function upperElements(el) {\n    var top = el.offsetTop,\n        left = el.offsetLeft,\n        width = el.offsetWidth,\n        height = el.offsetHeight,\n        elemTL = document.elementFromPoint(left, top),\n        elemTR = document.elementFromPoint(left + width - 1, top),\n        elemBL = document.elementFromPoint(left, top + height - 1),\n        elemBR = document.elementFromPoint(left + width - 1, top + height - 1),\n        elemCENTER = document.elementFromPoint(parseInt(left + (width / 2)), parseInt(top + (height / 2))),\n        elemsUpper = [];\n    if (elemTL != el) elemsUpper.push(elemTL);\n    if (elemTR != el && $.inArray(elemTR, elemsUpper) === -1) elemsUpper.push(elemTR);\n    if (elemBL != el && $.inArray(elemBL, elemsUpper) === -1) elemsUpper.push(elemBL);\n    if (elemBR != el && $.inArray(elemBR, elemsUpper) === -1) elemsUpper.push(elemBR);\n    if (elemCENTER != el && $.inArray(elemCENTER, elemsUpper) === -1) elemsUpper.push(elemCENTER);\n    return elemsUpper;\n}\xe2\x80\x8b\n

\n\n

jsFiddle

\n