documentelementFromPoint

document.elementFromPoint is a method on the Document interface in the DOM. It returns the top-most element at a specific point in the viewport, or null if no element is found at that location. The method takes two numeric arguments, x and y, which represent coordinates relative to the viewport’s origin (the visible area in the browser window).

The coordinates passed to elementFromPoint are typically derived from events such as mouse or pointer events, using properties like clientX and clientY. The hit-testing performed by this method considers CSS layout rules, including pointer-events, z-index, stacking contexts, and CSS transforms. Elements with pointer-events: none are skipped, and elements that are not hittable (for example, display: none or visibility: hidden) are not returned.

Usage of document.elementFromPoint is common for custom interaction patterns, such as implementing drag-and-drop, custom tooltips, or drawing applications that need to identify what the user is pointing at. A related function, document.elementsFromPoint(x, y), returns an array of all elements at the given point, ordered from top-most to bottom-most.

Notes and caveats: when used inside an iframe, coordinates are relative to the iframe’s viewport, not the top-level window; cross-origin restrictions may limit access in some cases. Also, some browsers may exhibit subtle variations in hit-testing behavior, especially with complex stacking contexts or transformed elements. Overall, elementFromPoint provides a straightforward way to query the element located under a specific viewport coordinate.