JavaScript Document elementsFromPoint() Method

What You’ll Learn

document.elementsFromPoint() is an instance method that returns an array of all elements at viewport coordinates (see MDN Document: elementsFromPoint()). Learn top-to-bottom ordering, how it relates to elementFromPoint(), reading stacks under the mouse, overlapping layers, and five try-it labs.

Introduction

elementFromPoint() answers “what is on top?” elementsFromPoint() answers “what is the whole stack under this point?” — useful for overlays, stacking contexts, and debugging layers.

MDN: the method returns an array of all elements at the specified coordinates (viewport-relative), ordered from the topmost to the bottommost box. It operates in a similar way to elementFromPoint().

Related tutorials: elementFromPoint(), caretPositionFromPoint(), createElement().

Understanding document.elementsFromPoint()

An instance method on Document (usually document.elementsFromPoint(x, y)).

• x / y — point coordinates (MDN); treat as viewport-relative like elementFromPoint.
• Return value — an array of Element objects (MDN).
• Order — topmost → bottommost (MDN).
• Similarity — operates similarly to elementFromPoint() (MDN).
• Index 0 — typically matches what elementFromPoint(x, y) returns.
• Feature check — MDN example uses if (document.elementsFromPoint).

📝 Syntax

General form of Document.elementsFromPoint (MDN):

elementsFromPoint(x, y)

Parameters

• x — the horizontal coordinate of a point (MDN).
• y — the vertical coordinate of a point (MDN).

Return value

An array of Element objects, ordered from the topmost to the bottommost box of the viewport (MDN).

Exceptions

None highlighted on MDN for this method.

MDN example

let output = document.getElementById("output");
if (document.elementsFromPoint) {
  let elements = document.elementsFromPoint(30, 20);
  elements.forEach((elt, i) => {
    output.textContent += elt.localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  });
}

⚖️ elementsFromPoint vs related APIs

Examples Gallery

Examples follow MDN Document: elementsFromPoint() and practical stacking hit-test patterns.

const output = document.getElementById("output");
if (document.elementsFromPoint) {
  const elements = document.elementsFromPoint(30, 20);
  elements.forEach((elt, i) => {
    output.textContent += elt.localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  });
}

p < div < body < html

document.addEventListener("mousemove", (event) => {
  const stack = document.elementsFromPoint(event.clientX, event.clientY);
  console.log(stack.map((el) => el.localName).join(" < "));
});

div < body < html
(changes as you move)

const x = 40;
const y = 40;
const top = document.elementFromPoint(x, y);
const stack = document.elementsFromPoint(x, y);

console.log(stack[0] === top); // true (typical)
console.log(stack.length);

true
4

const card = document.getElementById("card");
const r = card.getBoundingClientRect();
const stack = document.elementsFromPoint(
  r.left + r.width / 2,
  r.top + r.height / 2,
);

console.log(stack.map((el) => el.id || el.localName).join(" < "));
// e.g. "overlay < card < body < html"

overlay < card < body < html

const panel = document.getElementById("panel");
const r = panel.getBoundingClientRect();
const stack = document.elementsFromPoint(r.left + 8, r.top + 8);

const hitPanel = stack.includes(panel);
const firstDiv = stack.find((el) => el.localName === "div");

console.log(hitPanel);                 // true
console.log(firstDiv && firstDiv.id);  // "panel" (or a child on top)

true
panel

🚀 Common Use Cases

• Overlay debugging — see every layer under the cursor.
• Custom inspectors — list the hit stack like DevTools.
• Drop targets under modals — peek at elements beneath a transparent layer.
• Games / HUD UI — decide which stacked control was intended.
• When one is enough — prefer elementFromPoint for a single top hit.
• Text carets — still use caret APIs for offsets inside text.

📝 Notes

• MDN: Baseline Widely available since January 2020.
• Returns an array ordered topmost → bottommost (MDN).
• Operates similarly to elementFromPoint() (MDN).
• Prefer viewport coords (clientX / clientY).
• MDN’s sample feature-detects with if (document.elementsFromPoint).
• Related: elementFromPoint(), caretPositionFromPoint(), createTreeWalker().

💡 Best Practices