JavaScript で指定座標の要素を取得する elementFromPoint
JavaScript の document オブジェクトには elementFromPoint メソッドといって、指定した座標上に存在する要素を取得するメソッドがあります。
特に何に使うかなど思いつきませんが、高度な Web ツールなどを作る際に役に立ちそうなメソッドであると思われるので紹介してみます。
document.elementFromPoint
//x、y は画面左上を (0, 0) としたときの座標（client 値）
document.elementFromPoint(x, y)画面左上を基準とした x と y に座標を入れると、要素の DOM ノードが返ってきます。例えば
<div id="test">TEST</div>が存在する座標を x、y に入れたとすると、document.getElementById("test") で取得したときと同じものが返ってきます。DOM が戻り値というのは利用できる幅は広がりそうです。
利用例
どうしよもない利用例ですがこんな事も出来ますよ、という紹介です。
Click した要素を削除する
window.addEventListener("click", function(e) {
//クリック時のデフォルトの動作禁止
e.preventDefault();
//マウスカーソルの座標を取得
var x = e.clientX;
var y = e.clientY;
//座標上の要素を取得
var z = document.elementFromPoint(x, y);
//コンソールログを残す
console.log(z);
//要素の削除
z.parentNode.removeChild(z);
}, false);削除開始
上の「削除開始」ボタンを押すとクリックした要素を削除出来るようになります。ボタンをクリックした途端、そのボタン自体も消えてしまうかもしれませんが…
ブラウザのデフォルトの挙動も制御していますので、何をクリックしても消えます。元に戻したい場合はリロードをしてください。
console 上にはクリックした要素の log が残るようになっているので、チェックしたい場合はコンソールを調べてみてください。取得する要素は、その座標上に存在する最も階層が深いものが取得できるようです。そして、何よりも DOM の状態で取得できるのは便利です。
まとめ
Web ツールでクリックされた要素名やその要素の width や height 値を取得、なんかにも使えますし、開発者ツールのクリックした要素をチェックもこのメソッドを基本に出来ているのかもしれません。
利用価値がありそうでなさそうなぐらいのメソッドですが、面白いものだと思ったので紹介しました。
ただし、モバイル環境は全てチェックできないので、もしかしたらスマホでは取得できないかもしれません。