JavaScript如何获取指定矩形区域内重叠的div元素

现有一个大尺寸div，多个更小的同级div采用绝对定位排布在页面中，初始样式与结构如下：

.large{
  height:20rem;
  width:20rem;
  background-color:red;
  position:absolute;
}

.item1{
  height:5rem;
  width:5rem;
  background-color:blue;
  top:1rem;
  position:absolute;
}

.item2{
  height:5rem;
  width:5rem;
  background-color:green;
  top:3rem;
  left:2rem;
  position:absolute;
}

.item3{
  height:5rem;
  width:5rem;
  background-color:yellow;
  top:1rem;
  left:6rem;
  position:absolute;
}

<div class="large"></div>
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

核心需求如下：

• 获取所有落在大div尺寸范围内的小型div
• 确认是否存在和elementsFromPoint逻辑类似的原生API，比如支持直接查询指定矩形区域内元素的elementsFromArea类方法
• 实现通用的区域元素查询能力：传入任意矩形的x坐标、y坐标、高度、宽度参数，即可返回所有落在该区域内的div，大div仅作为测试用例

额外要求：不采用JS层全量遍历所有元素、手动计算碰撞关系的基础方案，可接受巧妙的变通实现。

目前没有标准化的elementsFromArea/elementsFromRect公开API，早期Chromium内核曾推出过非标准的elementsFromRect方法，但后续因规范对齐问题被移除，无法在生产环境兼容使用。下面提供两种符合无全量遍历要求的实现方案：

方案1：Intersection Observer 实现（性能最优） #

该方案完全依托浏览器渲染层原生的相交检测能力，不需要在JS层手动遍历全量DOM计算位置关系，检测性能远高于手写JS碰撞逻辑，尤其适合页面元素量级较大的场景。

async function elementsFromArea(x, y, width, height, targetSelector = 'div') {
  return new Promise(resolve => {
    // 创建与查询区域完全重合的临时根元素
    const detectRoot = document.createElement('div');
    Object.assign(detectRoot.style, {
      position: 'absolute',
      left: `${x}px`,
      top: `${y}px`,
      width: `${width}px`,
      height: `${height}px`,
      visibility: 'hidden',
      pointerEvents: 'none',
      zIndex: -99999
    });
    document.body.appendChild(detectRoot);

    const matchSet = new Set();
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) matchSet.add(entry.target);
      });
      // 等待一帧确保所有相交判定完成
      requestAnimationFrame(() => {
        observer.disconnect();
        detectRoot.remove();
        resolve(Array.from(matchSet));
      });
    }, {
      root: detectRoot,
      threshold: 0,
      rootMargin: '0px'
    });

    // 注册待观察元素，相交判定由浏览器底层完成
    document.querySelectorAll(targetSelector).forEach(el => {
      if (el !== detectRoot) observer.observe(el);
    });
  });
}

调用示例：

// 查询.large范围内的所有.item元素
const largeRect = document.querySelector('.large').getBoundingClientRect();
const overlapItems = await elementsFromArea(
  largeRect.left, 
  largeRect.top, 
  largeRect.width, 
  largeRect.height, 
  '.item'
);

方案2：多点采样同步实现 #

如果需要同步返回结果，可以依托已有的elementsFromPoint原生API，对目标矩形做均匀采样收集命中元素，再做轻量过滤排除采样误差。该方案同样不需要遍历全量DOM做位置计算，所有点命中逻辑由浏览器原生完成：

function elementsFromAreaSync(x, y, width, height, sampleStep = 10) {
  const matchSet = new Set();
  // 按步长采样区域内的点，步长越小精度越高，默认10px步长可覆盖绝大多数场景
  for (let cx = x; cx <= x + width; cx += sampleStep) {
    for (let cy = y; cy <= y + height; cy += sampleStep) {
      document.elementsFromPoint(cx, cy).forEach(el => matchSet.add(el));
    }
  }
  // 轻量过滤排除采样误差
  const areaBounds = {left: x, top: y, right: x + width, bottom: y + height};
  return Array.from(matchSet).filter(el => {
    const elRect = el.getBoundingClientRect();
    return !(
      elRect.right < areaBounds.left || 
      elRect.left > areaBounds.right || 
      elRect.bottom < areaBounds.top || 
      elRect.top > areaBounds.bottom
    );
  });
}

针对320px×320px的查询区域，采用默认10px步长仅需要执行1024次原生点命中测试，哪怕页面DOM量级过万，执行效率也远高于全量遍历计算。

内容的提问来源于stack exchange，提问作者cak3_lover