JavaScript Document elementFromPoint() Method

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

Definition

document.elementFromPoint(x, y) returns the topmost Element at viewport coordinates (x, y). If the point is outside the visible document (or a coordinate is negative), it returns null (MDN).

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

Syntax

Call document.elementFromPoint. Start with this line.

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

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

Library declarations
JavaScript
document.elementFromPoint(x, y)

Parameters

ParameterDescription
xRequired. Horizontal viewport coordinate
yRequired. Vertical viewport coordinate

Return Value

Return ValueDescription
*Topmost Element, or null

JavaScript Examples

Example 1 — Hit a Button

Measure the button, then ask which element sits at that viewport point.

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

console.log(el && el.tagName); // "BUTTON"
Try It Yourself

How It Works

  1. Find a target. Any visible element works (here, a button).
  2. Get its viewport box. getBoundingClientRect() gives left/top.
  3. Pick an interior point. left + 2, top + 2 stays inside.
  4. Hit-test. elementFromPoint returns that topmost element.

Example 2 — Outside Returns null

Negative coordinates (or a point outside the visible document) yield null (MDN).

JavaScript
const a = document.elementFromPoint(-1, 10);
const b = document.elementFromPoint(10, -1);

console.log(a); // null
console.log(b); // null
Try It Yourself

How It Works

  1. Pass a negative x. Outside the viewport on the left.
  2. Pass a negative y. Outside the viewport on the top.
  3. Engine returns null. No element is considered a hit (MDN).
  4. Always null-check. Avoid reading .tagName on a null result.

Example 3 — Topmost Nested Element

When nodes overlap in the hit stack, you get the topmost one — usually the deepest painted target.

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 el = document.elementFromPoint(r.left + 2, r.top + 2);

console.log(el.tagName); // "BUTTON"
outer.remove();
Try It Yourself

How It Works

  1. Nest a button in a div. Both occupy the same area for the hit.
  2. Measure the inner control. Use its rect for x/y.
  3. Topmost wins. The button is returned, not the outer div.
  4. Need the full stack? Use elementsFromPoint().
Compatibility

Browser Support

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

✓ Baseline · Widely available

Document.elementFromPoint()

Supported in every modern browser. Safe for hit-testing with viewport coordinates.

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.elementFromPoint() Excellent

Bottom line: Safe everywhere. Focus on viewport coords, null checks, and whether you need the full stack via elementsFromPoint.

Frequently Asked Questions

MDN: Document.elementFromPoint() returns the topmost Element at the specified coordinates relative to the viewport.
No. MDN marks Document.elementFromPoint() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard.
MDN: x is the horizontal coordinate from the left edge of the current viewport; y is the vertical coordinate from the top edge of the current viewport.
MDN: if the specified point is outside the visible bounds of the document, or either coordinate is negative, the result is null.
MDN: elements with pointer-events set to none are ignored, and the element below is returned.
MDN: if you need the specific position inside the element (for example a text offset), use Document.caretPositionFromPoint(). elementFromPoint only returns the topmost Element.

Next: elementsFromPoint()

Learn how to get every element stacked under a viewport point.

elementsFromPoint() 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 createTreeWalker() Method JavaScript Document elementsFromPoint() Method