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

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

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

JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。

このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。

それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。

例1：3番目のリンクのhref属性を取得する

次の例では、ページ内に3つのリンクを配置しています。document.links[2].hrefと指定することで、3番目のリンク（インデックス2）のhref属性を出力しています。配列と同様に、インデックスは0から始まる点に注意してください。

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
   <a href="https://www.tutorialspoint.com/java8/index.htm">Java</a><br>
   <a href="https://www.tutorialspoint.com/spring/index.htm">Spring</a>
<p id="links"></p>
<script>
   document.getElementById("links").innerHTML =
   "href属性の値は: " + document.links[2].href;
</script>
</body>
</html>

実行結果

Javascript
Java
Spring
href属性の値は: https://www.tutorialspoint.com/spring/index.htm

このように、配列と同じ考え方でインデックスを指定するだけで、目的のリンク情報へすぐにアクセスできます。

例2：最初のリンクのhref属性を取得する

続いて、2つのリンクを配置した例です。document.links[0].hrefと指定することで、1番目のリンク（インデックス0）のhref属性を取得して表示しています。

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">Javascript</a><br>
   <a href="https://www.tutorialspoint.com/java8/index.htm">Java</a>
<p id="links"></p>
<script>
   document.getElementById("links").innerHTML =
   "href属性の値は: " + document.links[0].href;
</script>
</body>
</html>

実行結果

Javascript
Java
href属性の値は: https://www.tutorialspoint.com/javascript/index.htm

document.linksを使う際のポイント

  • document.linksは、ドキュメント内のhref属性を持つ<a>タグおよび<area>タグをまとめたHTMLCollectionを返します。
  • name属性のみを持つアンカータグなど、href属性を持たないリンクは対象に含まれません。
  • インデックスは0から始まるため、「n番目のリンク」を取得したい場合はlinks[n-1]と指定します。
  • すべてのリンクを順に処理したい場合は、for文やforEachと組み合わせると便利です。
  1. JavaScriptでフォームのaccept-charset属性とenctype属性を取得する方法

    JavaScriptでは、フォームのaccept-charset属性およびenctype属性の値を取得するために、それぞれ専用のDOMプロパティacceptCharsetとenctypeが用意されています。ここでは、それぞれの使い方について順番に解説していきます。 accept-charset属性の取得方法 accept-charset属性は、フォーム送信時にサーバー側が受け入れる文字エンコーディングを指定するための属性です。フォーム要素のacceptCharsetプロパティにアクセスすることで、設定されている値を簡単に取得できます。 サンプルコード 次の例では、フォームにあらかじめaccep

  2. JavaScriptで数値の立方根を求める方法！Math.cbrt()メソッドの使い方を解説

    JavaScriptのMathオブジェクトと立方根JavaScriptでは、Mathオブジェクトを使用することで、さまざまな数学的な操作を実行できます。その中でもMath.cbrt()は、数値の立方根（三乗根）を求めるために特化したメソッドです。引数として数値を1つ受け取り、その立方根の値を戻り値として返します。平方根を求めるMath.sqrt()とは異なり、負の数に対しても有効な結果を返せる点が大きな特徴です。数学的に、負の数の立方根も実数として定義されるためです。構文Math.cbrt(64);引数に数値を渡すと、その立方根の値が戻り値として返されます。例1：正の値の立方根を求める次の例で