JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】ページ内のすべてのリンクの座標を取得する方法

JavaScriptを使えば、Webページ内にあるすべてのリンク（<a>タグ）の位置やサイズに関する情報を簡単に取得できます。この記事では、ボタンをクリックすると各リンクの座標情報を一覧で表示するサンプルコードをわかりやすく解説します。

サンプルコード

以下は、ページ内のすべてのリンクの座標を取得して表示するHTMLとJavaScriptのコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
}
</style>
</head>
<body>
<h1>ページ内のすべてのリンクの座標</h1>
<div style="color: green;" class="result"></div>
<a href="www.google.com">google.com</a>
<a href="www.facebook.com">facebook.com</a>
<a href="www.yahoo.com">yahoo.com</a>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックするとリンクの座標が表示されます
</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let links = document.getElementsByTagName("a");
    BtnEle.addEventListener("click", () => {
        for (let i of links) {
            console.log(i);
            resEle.innerHTML +=
            "X axis = " +
            i.offsetWidth +
            " Y axis = " +
            i.offsetHeight +
            "<br>";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

【JavaScript】ページ内のすべてのリンクの座標を取得する方法

「CLICK HERE」ボタンをクリックすると、各リンクのX軸・Y軸の値が緑色のテキストとして順に表示されます。

【JavaScript】ページ内のすべてのリンクの座標を取得する方法

コードのポイント

  • document.getElementsByTagName("a")：ページ内のすべてのアンカー要素をHTMLCollectionとしてまとめて取得します。
  • addEventListener("click", ...)：ボタンがクリックされたタイミングで座標の取得処理を実行します。
  • offsetWidth / offsetHeight：それぞれ要素の幅と高さをピクセル単位の整数で返します。

補足：正確な「座標」を取得したい場合

offsetWidthやoffsetHeightは、厳密には要素の「サイズ」を表すプロパティです。ビューポート（表示領域）の左上を基準とした正確な座標を取得したい場合は、getBoundingClientRect()メソッドを使用するのがおすすめです。

const links = document.getElementsByTagName("a");
for (let link of links) {
  const rect = link.getBoundingClientRect();
  console.log(`X: ${rect.left}, Y: ${rect.top}`);
}

この方法を使えば、スクロール位置を考慮した各リンクの左上の座標（left・top）を正確に取得でき、より実践的な実装になります。

  1. 正規表現を使って引用符で囲まれたテキストを抽出するJavaScriptコード

    この記事では、正規表現（RegExp）を使用して、文字列から引用符「" "」で囲まれたテキストを抽出する方法を、実際に動作するサンプルコードとともに解説します。ポイントは、/"(.*?)"/g というパターンです。.*? による最短一致と g フラグ（グローバル検索）を組み合わせることで、文中の引用符で挟まれた部分を取得できます。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /&

  2. 【JavaScript入門】HTMLページ上のテキスト選択を解除する方法とサンプルコード

    HTMLページ上のテキスト選択を解除するには？ Webアプリケーションを開発していると、「ユーザーが選択しているテキストをプログラム側から解除したい」という場面に出会うことがあります。たとえば、ドラッグ＆ドロップ操作の前処理や、UIの状態をリセットしたいときなどがその代表例です。 JavaScriptでは、window.getSelection()メソッドとremoveAllRanges()メソッドを組み合わせることで、ページ上のすべてのテキスト選択を簡単に解除できます。以下に具体的な実装例を紹介します。 実装例 次のコードは、ボタンをクリックするとページ内のテキスト選択がすべて解除されるシ