document.elementFromPoint() and document.elementsFromPoint()
elementFromPoint() メソッドは Document オブジェクト上で利用可能で、指定した座標(ビューポートからの相対座標)における最上位の要素 (Element) を返します。
指定された点の要素が他の文書(例えば <iframe> の文書)に属する場合、その文書の親要素(<iframe> 自身)が返される。指定された点の要素が無名または XBL で生成されたコンテンツ、例えばテキストボックスのスクロールバーである場合、最初の無名ではない祖先要素(例えばテキストボックス)が返されます。
pointer-events が none に設定されている要素は無視され、その下の要素が返されます。
このメソッドが他の文書(<iframe> のサブ文書など)で実行された場合、座標はメソッドが呼び出された文書からの相対座標となります。
指定した点が文書の可視領域外にある場合や、どちらかの座標が負の値である場合、結果は null となります。
要素内の特定の位置を見つける必要がある場合は、 Document.caretPositionFromPoint() を使用してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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件
実装メモ
- 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) やユーザー操作起点を必要とする。利用前に要件を確認すること。