获得特定区域DOM元素的最佳(最快)方法是什么？

Question

我想要得到一个选择器区域内的所有DOM元素(当按下并拖动鼠标左键时，如photoshop、插画师、图形选择器)。作为下列img：

​

​

​

所有元素都是具有left, top, width, height属性的绝对位置。选择器给出一个带有left, top, bottom, right, width, height的矩形。请注意，我们有很多元素(例如:10,000个DOM元素)，所以如果我们循环所有10,000个元素来检查它是否在选择器区域中，这不是个好主意。

我尝试过两种解决方案：

1. 首先使用intersection-observer在屏幕上观察可见元素，然后我们只需要签入这些元素。
2. 用4个对象缓存所有元素：
   • byTops:用顺序top升序存储所有元素
   • byBottoms:用顺序bottom升序存储所有元素
   • byLefts:用顺序left升序存储所有元素
   • byRights:用顺序top升序存储所有元素

​

当我们检查的时候，可能会更快

这是解决方案1：解决方案1的演示的演示

有谁有更好的解决方案吗？请帮帮我!

非常感谢你！

Answer 1

如果您知道他们可以选择的每个元素的最小大小，您可能会使用document.elementFromPoint来获得所选的元素。

我的意思是，假设他们画了一个选项，他们可以选择的每一样东西都至少是40 px60 at。然后你可以这样做：

let {top, left, right, bottom} = rectangleCoords;
const selectedElements = new Set();
for (let x = left; x <= right; x += 40) {
    for (let y = top; y <= bottom; y+= 60) {
        const el = document.elementFromPoint(x, y).closest('.thing-you-want');
        if (el) {
            selectedElements.add(el);
        }
    }
}