选择特定区域中所有HTML元素的最优化方法是什么？

Question

是否有优化的方法来选择矩形内的所有DOM元素？

为使情况更加清楚，我提供了一些插图。假设我们有一个这样的HTML页面：

现在，我们将基于特定的矩形选择元素。

const ourBox = {
    offsetTop: 1100,
    offsetLeft: 600,
    width: 400,
    height: 400
}

const elements = getAllElementsInsideBox(ourBox)

console.log(elements)
// Logs array of elements which have collisions with imagined box

对于上面的框，所选元素将是用蓝色边框指定的元素，如图所示：

奖金挑战

如果要找到矩形的优化代码并不难，那就让我们通过选择一个圆内的元素使其更具挑战性。代码如下：

const ourCircle = {
    centerTop: 1200,
    centerLeft: 500,
    radius: 150
}

const elements = getAllElementsInsideCircle(ourCircle)

console.log(elements)
// Logs array of elements which have collisions with the imagined circle

这对我来说是一个挑战，我正在努力。如果我找到最佳解决方案，我会在这里与您分享，如果您与我分享您的解决方案，我也将不胜感激。

  

注意：一种检查所有元素偏移的方法是一种方法，但可能没有进行优化！让我们以不同的方式尝试。