How to get all sibling div's inside overlapping div area?

Question

I have a large div and smaller siblings divs positioned inside it like this:

.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>

How do I get all the small divs within the large div dimensions?
Is there something similar to elementsFromPoint? Maybe something like elementsFromArea

Edit:

assume .large spans 320 pixels x 320 pixels
and I have multiple smaller divs on my screen, which can either be overlapping .large or outside it

How do I find divs which are overlapping .large?

Maybe we could get the position of .large & we already have the height and width of it and add it to some function like this:

elementsFromArea(large_x,large_y,large_height,large_width);

This should return an array of all the divs within that given range

(.large is merely for reference sake, I simply want to pass any given square area & find all the divs lying within it )

Bounty Edit:

The solution provided by @A Haworth works but I'm looking for a solution which doesn't involve having to loop and check every single element

this fiddle explains what I'm ultimately trying to achieve

Any clever work around will be accepted too!

Answer 1

You can use getBoundingClientRect to find the left, right, top and bottom bounds of each element.

Then test whether there is overlap with the large element by seeing whether the left is to the left of the right side of the large element and so on:

if ( ((l <= Right) && (r >= Left)) && ( (t <= Bottom) && (b >= Top)) )

To give a more thorough test, in this snippet the blue element has been pushed down so it only partially overlaps the large one and the yellow element doesn't overlap at all.

const large = document.querySelector('.large');
const largeRect = large.getBoundingClientRect();
const Left = largeRect.left;
const Right = largeRect.right;
const Top = largeRect.top;
const Bottom = largeRect.bottom;
const items = document.querySelectorAll('.large ~ *');
let overlappers = [];
items.forEach(item => {
  const itemRect = item.getBoundingClientRect();
  const l = itemRect.left;
  const r = itemRect.right;
  const t = itemRect.top;
  const b = itemRect.bottom;
  if (((l <= Right) && (r >= Left)) && ((t <= Bottom) && (b >= Top))) {
    overlappers.push(item);
  }
});
console.log('The items with these background colors overlap the large element:');
overlappers.forEach(item => {
  console.log(window.getComputedStyle(item).backgroundColor);
});

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

.item1 {
  height: 5rem;
  width: 5rem;
  background-color: blue;
  top: 19rem;
  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: 26rem;
  position: absolute;
}

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

Note, this snippet tests only those elements which are siblings of large in the CSS sense, that is that follow large. If you want all siblings whether they follow large or come before it then go back up to large's parent and get all its children (which will of course include large).

Answer 2

The IntersectionObserver API describes exactly what you are looking for. It's a relatively new API so I'm not surprised the other answers have not referenced it.

I have personally used it in a lazy loading context for displaying large tables without rendering 9001 rows at once. In my case, I would use the IntersectionObserver to determine when the last table row was in the user's field of view, and then I would load additional rows. It's very performant as it doesn't require any loops that poll the position of DOM elements, and the browser is free to optimize it however it likes.

Stealing from MDN, here's a simple way to create an IntersectionObserver. I've commented out options which I don't think you need.

    let options = {
        root: document.querySelector('.large'),
        // rootMargin: '0px',
        // threshold: 1.0
    }
    
    let observer = new IntersectionObserver(callback, options);

The callback is a function that fires whenever an element's intersection of .large changes by a certain threshold. If threshold = 0 (the default value and what I think you want in your case), then it will fire even if only 1 pixel overlaps.

Once you've created an IntersectionObserver with .large as the root, you will then want to .observe() the smaller divs so the IntersectionObserver can report on when they intersect .large.

Again, stealing from MDN, the format of the callback is as follows. Please note that the callback fires on intersection changes, meaning that if a smaller div that used to intersect .large no longer does, it will be in the list of entries. To get elements that are intersecting .large you will want to filter entries such that only those where entry.isInterecting === true are present. From the filtered list of entries you can then grab entry.target from every entry.

    let callback = (entries, observer) => {
        entries.forEach(entry => {
            // Each entry describes an intersection change for one observed
            // target element:
            //   entry.boundingClientRect
            //   entry.intersectionRatio
            //   entry.intersectionRect
            //   entry.isIntersecting
            //   entry.rootBounds
            //   entry.target
            //   entry.time
        });
    };