Document: elementsFromPoint() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

構文

js
elementsFromPoint(x, y)

引数

x

点の水平座標です。

y

点の垂直座標です。

返値

Element オブジェクトの配列で、ビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

例

HTML

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

JavaScript

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

結果

仕様書

Specification
CSSOM View Module
# dom-document-elementsfrompoint

ブラウザーの互換性

BCD tables only load in the browser

関連情報