JavaScript Document elementsFromPoint() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word ELEMENTSFROMPOINT

Definition

document.elementsFromPoint(x, y) returns an array of every Element under viewport coordinates (x, y), ordered from topmost to bottommost. It works like elementFromPoint(), but gives the full stack (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.elementsFromPoint. Start with this line.

JavaScript
document.elementsFromPoint(x, y)
CallWhat it does
document.elementsFromPoint(x, y)Primary signature.
document.elementsFromPoint(...)Call with the arguments your case needs.

Built into the browser. Call elementsFromPoint(...) on document — no import required.

Library declarations
JavaScript
document.elementsFromPoint(x, y)

Parameters

ParameterDescription
xRequired. Horizontal viewport coordinate
yRequired. Vertical viewport coordinate

Return Value

Return ValueDescription
*Element[] topmost → bottommost

JavaScript Examples

Example 1 — Print the Stack

MDN-style output: local names joined with < from top to bottom.

JavaScript
const btn = document.querySelector("button");
const r = btn.getBoundingClientRect();
const stack = document.elementsFromPoint(r.left + 2, r.top + 2);

console.log(
  stack.map((el) => el.localName).join(" < ")
);
// e.g. "button < body < html"
Try It Yourself

How It Works

  1. Measure a target. Use getBoundingClientRect() for a point inside it.
  2. Call elementsFromPoint. You get every Element under that point.
  3. Map localName. Tag names without the uppercase form.
  4. Join with <. Reads as topmost < … < bottommost (MDN demo style).

Example 2 — vs elementFromPoint()

The first stack entry matches the single topmost hit.

JavaScript
const btn = document.querySelector("button");
const r = btn.getBoundingClientRect();
const x = r.left + 2;
const y = r.top + 2;

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

console.log(one === stack[0]); // true
console.log(stack.length > 1); // true
Try It Yourself

How It Works

  1. Same point for both APIs. Keep x/y identical.
  2. elementFromPoint. Returns only the topmost Element.
  3. elementsFromPoint. Returns the full stack; [0] is that same node.
  4. Length > 1. Parents / root boxes usually follow the target.

Example 3 — Nested Layers

A point on an inner control lists the control, then its ancestors.

JavaScript
const outer = document.createElement("div");
const inner = document.createElement("button");
inner.textContent = "Inner";
outer.appendChild(inner);
document.body.appendChild(outer);

const r = inner.getBoundingClientRect();
const stack = document.elementsFromPoint(r.left + 2, r.top + 2);

console.log(stack[0].tagName); // "BUTTON"
console.log(stack.some((el) => el === outer)); // true
outer.remove();
Try It Yourself

How It Works

  1. Nest a button in a div. Both boxes cover the hit point.
  2. Topmost is the button. stack[0] is the painted front.
  3. Outer is still listed. Later indexes include the parent div.
  4. Use case. Great for overlays, custom drop targets, and “what is under this?” tools.
Compatibility

Browser Support

Document.elementsFromPoint() is Baseline Widely available (MDN). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

Document.elementsFromPoint()

Supported in every modern browser. Use when you need the full hit stack, not just the topmost node.

99% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
document.elementsFromPoint() Excellent

Bottom line: Safe everywhere. Focus on stack order (top → bottom) and whether elementFromPoint is enough for your case.

Frequently Asked Questions

MDN: Document.elementsFromPoint() returns an array of all elements at the specified coordinates (relative to the viewport), ordered from the topmost to the bottommost box.
No. MDN marks Document.elementsFromPoint() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard.
MDN: it operates similarly to elementFromPoint(), but returns every element in the stack instead of only the topmost Element.
MDN: ordered from the topmost to the bottommost box of the viewport. Index 0 is usually the same element elementFromPoint() would return.
Yes. Like elementFromPoint, use viewport coordinates such as mouse event clientX and clientY.
You get an empty array (or only root boxes, depending on the point). Always check length before reading stack[0].

Next: enableStyleSheetsForSet()

Learn how document stylesheet sets are enabled by name.

enableStyleSheetsForSet() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document elementFromPoint() Method JavaScript Document enableStyleSheetsForSet() Method