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

JavaScriptでリンクのhref属性の値を取得する方法を解説

JavaScriptでリンク（<a>タグ）のhref属性の値を取得したい場合は、hrefプロパティを使うのが最もシンプルです。このプロパティにアクセスすることで、リンク先ドキュメントのURLをそのまま文字列として取得できます。

基本的な使い方

まず、document.getElementById()などで対象のアンカー要素を取得し、そのhrefプロパティを参照します。

サンプルコード

以下のコードを実行すると、リンクのhref属性の値を取得して画面に表示できます。

<!DOCTYPE html>
<html>
   <body>
      <p><a id="anchorid" href="https://www.qries.com/">Qries</a></p>
      <script>
         var myLink = document.getElementById("anchorid").href;
         document.write("Link: " + myLink);
      </script>
   </body>
</html>

実行結果

Link: https://www.qries.com/

補足：getAttribute()メソッドとの違い

同様の目的には、getAttribute("href")メソッドも利用できます。両者の違いは以下のとおりです。

  • hrefプロパティ： HTMLに記述された相対パスなどを、絶対URLに解決した完全なURLを返します。
  • getAttribute("href")： HTMLソースに実際に記述された値（生の文字列）をそのまま返します。

用途に応じて使い分けることで、より正確にリンク情報を扱うことができます。

  1. JavaScriptでページ内リンクのhref属性を取得する方法｜document.linksの使い方を解説

    JavaScriptでリンクのhref属性を取得する方法JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。例1：3番目のリンクのhref属性を取得

  2. JavaScriptでリンクのhref属性とtarget属性を取得する方法

    Webページ上のリンクは、通常<p>タグなどの内側に配置された<a>（アンカー）タグで表現され、リンク先のURLを示すhref属性や、リンクの開き方を指定するtarget属性を持っています。JavaScriptでは、getElementById()メソッドでアンカー要素を取得し、その要素が持つhrefプロパティやtargetプロパティにアクセスすることで、これらの属性値を簡単に読み取ることができます。以下、それぞれの取得方法を順番に見ていきましょう。href属性を取得する方法リンク先のURLを取得するには、アンカー要素のhrefプロパティを使用します。次の例では、idが