Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
3
4
18
3.2

elementsFromPoint() は Document インターフェイスのメソッドで、指定された(ビューポートからの相対位置の)座標にあるすべての要素の配列を返します。 要素はビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

43
79
46
11.1
43
11.3
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Chrome 66 以前では、要素がホストノードの子要素である場合、このメソッドは `null` を返していました。バグ 40537452 を参照してください。
注釈 1件
実装メモ
  • Chrome Android 66 以前では、要素がホストノードの子要素である場合、このメソッドは `null` を返していました。バグ 40537452 を参照してください。
注釈 1件
実装メモ
  • Chrome 66 以前では、要素がホストノードの子要素である場合、このメソッドは `null` を返していました。バグ 40537452 を参照してください。
注釈 3件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • ベンダープレフィックス付きで対応: ms (12)
実装メモ
  • 配列ではなく `NodeList` を返します。MSDN のドキュメントを参照してください。指定されたポイントの下に要素がない場合(たとえば、ドキュメントの外側のポイントが指定された場合など)、`null` を返します。
注釈 1件
実装メモ
  • Chrome Android 66 以前では、要素がホストノードの子要素である場合、このメソッドは `null` を返していました。バグ 40537452 を参照してください。

基本構文

JAVASCRIPT
elementFromPoint(x, y)

実務での使いどころ

  • document.elementFromPoint() and document.elementsFromPoint() の活用

    elementFromPoint() メソッドは Document オブジェクト上で利用可能で、指定した座標(ビューポートからの相対座標)における最上位の要素 (Element) を返します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。