使用document.elementsFromPoint在Javascript中获取元素

在Javascript中，我们可以使用document.elementsFromPoint方法来获取页面上特定坐标处的所有元素。这个方法接收两个参数：x和y坐标，以像素为单位。它会返回一个数组，其中包含所有与给定坐标相交的元素，从最上面的元素开始，这些元素按z-index顺序排列。

用法示例

let elements = document.elementsFromPoint(100, 100);
console.log(elements);

上述代码将获取页面上坐标为(100, 100)的所有元素，并在控制台中输出它们。请注意，如果指定的坐标在当前页面的边缘之外，则结果数组将为空。

返回值

document.elementsFromPoint方法返回的数组中包含的元素是从最上面的元素开始按z-index顺序排列的。这意味着，如果页面上有多个叠加的元素，则位于数组前面的元素更接近用户。

兼容性

document.elementsFromPoint方法在主流浏览器中均可使用，包括Chrome，Firefox，Safari，以及Internet Explorer 9及其以上版本。

注意事项

获取页面上某个元素的具体位置可以使用以下方法：

function getElementPosition(elem) {
  let bbox = elem.getBoundingClientRect();
  return {
    left: bbox.left + window.pageXOffset,
    top: bbox.top + window.pageYOffset
  };
}

let element = document.getElementById('my-element');
let position = getElementPosition(element);
console.log(position.left, position.top);

上述代码中，getElementPosition函数接收一个元素对象作为参数，并返回一个包含该元素左上角的x和y坐标的对象。要获得正确的位置值，我们需要将元素的边框相对于窗口左上角的距离添加到滚动偏移量中。

总结

本文介绍了在Javascript中使用document.elementsFromPoint方法来获取页面上某个点附近的所有元素。使用该方法可以方便地查找指定坐标处的元素，并处理它们。同时，我们还介绍了如何获取元素的具体位置，以便在使用document.elementsFromPoint方法时获取正确的结果。