DocumentOrShadowRoot.elementsFromPoint()

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

elementsFromPoint()DocumentOrShadowRoot インターフェイスのメソッドで、指定された座標 (ビューポートからの相対) にあるすべての要素の配列を返します。

これは elementFromPoint() メソッドと同じような方法で動作します。

構文

const elements = document.elementsFromPoint(x, y);

引数

x
点の水平座標です。
y
点の垂直座標です。

返値

Element オブジェクトの配列です。

HTML

<div>
  <p>Some text</p>
</div>
<p>Elements at point 30, 20:</p>
<div id="output"></div>

JavaScript

let output = document.getElementById("output");
if (document.elementsFromPoint) {
  let elements = document.elementsFromPoint(30, 20);
  for (var i = 0; i < elements.length; i++) {
    output.textContent += elements[i].localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  }
} else {
  output.innerHTML = "<span style=\"color: red;\">" +
     "Browser does not support <code>document.elementsFromPoint()</code>" +
     "</span>";
}

仕様書

仕様書 状態
Shadow DOM
elementsFromPoint() の定義
廃止された
CSS Object Model (CSSOM) View Module
elementsFromPoint() の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
elementsFromPoint
実験的
Chrome 完全対応 53
補足
完全対応 53
補足
補足 Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
Edge 完全対応 12
補足 代替名
完全対応 12
補足 代替名
補足 Returns a NodeList instead of an array. See the MSDN documentation. Returns null when the point provided has no elements beneath it (e.g., when given a point outside the document).
代替名 非標準の名前 msElementsFromPoint を使用しています。
Firefox 完全対応 63IE 完全対応 10
補足 代替名
完全対応 10
補足 代替名
補足 Returns a NodeList instead of an array. See the MSDN documentation. Returns null when the point provided has no elements beneath it (e.g., when given a point outside the document).
代替名 非標準の名前 msElementsFromPoint を使用しています。
Opera 完全対応 40Safari 完全対応 12WebView Android 完全対応 53
補足
完全対応 53
補足
補足 Before WebView 66, this method returned null when the element was a child of a host node. See issue 759947.
Chrome Android 完全対応 53
補足
完全対応 53
補足
補足 Before Chrome 66, this method returned null when the element was a child of a host node. See issue 759947.
Firefox Android 完全対応 63Opera Android 完全対応 41Safari iOS 完全対応 12Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Before Samsung Internet 9.0, this method returned null when the element was a child of a host node. See issue 759947.

凡例

完全対応  
完全対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報