在特定區域獲取 DOM 元素的最佳（最快）方法是什么

Question

我想獲取選擇器區域內的所有 DOM 元素（在按住並拖動鼠標左鍵時創建，如 photoshop、illustrator、figma 選擇器）。 如下圖所示：

所有元素都是具有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來獲取選擇的元素。

我的意思是，假設他們畫了一個選區，他們可以選擇的每個東西至少是 40px x 60px。 然后，您可以執行以下操作：

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);
        }
    }
}