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

JavaScriptでドキュメント内のリンク数を取得する方法

JavaScriptでドキュメント内のリンク数を取得する

JavaScriptのDOM（Document Object Model）には、ドキュメントに関するさまざまな情報を取得するためのプロパティが多数用意されています。その中でもdocument.links.lengthを使用すると、ドキュメント内に含まれるリンク（<a>タグ）の総数を簡単に取得できます。

document.linksは、href属性を持つすべてのアンカー要素を格納したHTMLCollectionを返します。そのlengthプロパティを参照することで、リンクの総数がわかります。この操作はページの通常の動作に影響を与えません。

例1：3つのリンクがある場合

次の例では、コード内に3つのリンクが記述されています。document.links.lengthを使うことで、リンクの数が出力として表示されます。

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript</a><br>
   <a href="https://www.tutorialspoint.com/php/index.htm">PHP</a><br>
   <a href="https://www.tutorialspoint.com/java8/index.htm">Java</a><br>
   <p id="links"></p>
   <script>
      document.getElementById("links").innerHTML =
      "リンクの数は: " + document.links.length;
   </script>
</body>
</html>

出力結果

JavaScript
PHP
Java
リンクの数は: 3

例2：2つのリンクがある場合

次の例では、コード内に2つのリンクが記述されています。こちらも同じくdocument.links.lengthを使用して、リンクの数を出力しています。

<html>
<body>
   <a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript</a><br>
   <a href="https://www.tutorialspoint.com/bitcoin/index.htm">Bitcoin</a><br>
   <script>
      document.write("リンクの数は: " + document.links.length);
   </script>
</body>
</html>

出力結果

JavaScript
Bitcoin
リンクの数は: 2

まとめ

document.links.lengthを使えば、わずか1行のコードでドキュメント内のリンク数を取得できます。リンク一覧の表示やナビゲーション統計の取得など、さまざまな場面で活用できる便利なプロパティです。

  1. JavaScriptで3次元配列から最大値を取得する方法

    JavaScriptでは、flat()メソッドとMath.max()を組み合わせることで、多次元（3D）配列の中から最大の数値を簡単に見つけることができます。 対象となる3次元配列 例として、以下のような入れ子構造を持つ3次元配列を考えます。 var theValuesIn3DArray = [75, [18, 89], [56, [97], [99]]]; この配列には、数値だけでなく配列が何重にもネストされています。そこで、flat(Infinity)を使って配列を完全にフラット化（一次元化）してから、Math.max()で最大値を求めます。 実装例 Array.prototypeに独自の

  2. undefinedなどの要素が混在する配列から最大の数値を見つける方法 - JavaScript

    JavaScriptでは、数値・文字列・falsyな値（undefinedやnullなど）が混在する配列の中から、最大の数値だけを取り出したい場面があります。本記事では、そのような配列を受け取り、含まれる最大の数値を返す関数の実装方法を解説します。 問題の概要 例えば、以下のようにundefinedやnull、NaNといった値が混ざった配列が入力として与えられたとします。 const arr = [23, hello, undefined, null, 21, 65, NaN, 1, undefined, hii]; この場合、関数は配列内の最大の数値である65を返す必要があります。 実装のポ