> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/document/methods/doc.elementfrompoint.md).

# doc.elementFromPoint()

[🔰 JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [types](/web/browser/dom/type.md) ⟩ [Document](/web/browser/dom/type/document.md) ⟩ [methods](/web/browser/dom/type/document/methods.md) ⟩ .elementFromPoint

{% hint style="success" %}
returns the <mark style="color:yellow;">**innermost**</mark> (most deeply nested) and <mark style="color:yellow;">**topmost**</mark> (highest CSS <mark style="color:purple;">z-index</mark>) [element](/web/browser/dom/type/element.md) at that point (<mark style="color:red;">**relative to the**</mark> [viewport](/web/browser/dom/type/window/viewport.md)).
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
the coordinates are <mark style="color:yellow;">**relative**</mark> to the [viewport](/web/browser/dom/type/window/viewport.md).
{% endhint %}

{% hint style="danger" %}
returns <mark style="color:purple;">**null**</mark> if the point is <mark style="color:red;">**out of**</mark> [viewport](/web/browser/dom/type/window/viewport.md).
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit: [document.elementFromPoint()](https://replit.com/@pegasusroe/documentelementFromPoint#script.js)

```javascript
// viewport
const viewport = {
    
    // .width, .height
    width : window.innerWidth,
    height: window.innerHeight,

    // .center
    get center() {
        const x = this.width / 2;
        const y = this.height / 2;
        return {
            x: x, y: y,        // `.center` as object {x:y:}
            coords: [x, y],    // `.center.coords` as array [x,y]
        }
    },
};

// select element at the center of the viewport
let elem = document.elementFromPoint(...viewport.center.coords);
elem.style.background = "red";
```

{% endtab %}

{% tab title="📘 手冊" %}

* [Document](/web/browser/dom/type/document.md) ⟩ [.elementFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [elementFromPoint(x, y)](https://tr.javascript.info/coordinates#elementFromPoint)
  {% endtab %}

{% tab title="👥 相關" %}

* [Element](/web/browser/dom/type/element.md)
* coordinates relative to [viewport](/web/browser/dom/type/window/viewport.md).
  {% endtab %}
  {% endtabs %}