# doc.elementFromPoint()

[🔰 JS](../../../../../js) ⟩ [browser](../../../..) ⟩ [DOM](../../..) ⟩ [types](../..) ⟩ [Document](..) ⟩ [methods]() ⟩ .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](../../element) at that point (<mark style="color:red;">**relative to the**</mark> [viewport](../../window/viewport "mention")).
{% endhint %}

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

{% hint style="danger" %}
returns <mark style="color:purple;">**null**</mark> if the point is <mark style="color:red;">**out of**</mark> [viewport](../../window/viewport "mention").
{% 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="📘 手冊" %}
* [..](.. "mention") ⟩ [.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](../../element "mention")
* coordinates relative to [viewport](../../window/viewport "mention").
{% endtab %}
{% endtabs %}
