javascript - javascript 中的 getElementsByPosition() 可能吗？

Question

我正在做一个研究项目，想法是扫描呈现的网页中的元素，以计算它们与其他 DOM 区域的内容和布局。

基本上我需要从左上角到下向下扫描可见页面。

给定一个已知元素，很容易获得它的位置，如.offsetLeft,offsetTop或 jQuery 的.position(), .offset()。但是反向呢？

getElementsByPosition(x, y)在现代浏览器的 Javascript 中是否有类似的功能？

Answer 1

您可能想看一下document.elementFromPoint(x,y)，它返回给定点的最顶层元素（除非您通过例如 将其排除在目标之外pointer-events）。

至于跨浏览器的兼容性，还是可以的，但是要支持老版本的浏览器就要小心了，因为 Safari 4.0 和 Opera 10.10 使用了错误的坐标（他们想要的是绝对坐标，而不是相对坐标） .

对于您的项目，此方法的一个缺点是它与视口相关，null如果您检查当前不可见的内容，则会返回。从W3C 规范：

elementFromPoint(x, y) 方法必须遵循以下步骤：

1. 如果任一参数为负，则 x 大于不包括渲染滚动条（如果有）大小的视口宽度，或者 y 大于不包括渲染滚动条大小（如果有）的视口高度，或者存在没有与文档关联的视口，返回 null 并终止这些步骤。

2. 如果视口中有一个布局框将成为坐标 x,y 处的命中测试的目标，则返回关联的元素并终止这些步骤。

3. 如果文档有根元素，则返回根元素并终止这些步骤。

4. 返回空值。