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

JavaScriptでドキュメント内のアンカーの数を取得する方法

Webページ内に含まれるアンカー（リンク）の数を取得したい場合は、JavaScriptのanchorsプロパティを使用します。このプロパティは、ドキュメント内のname属性を持つすべての<a>要素のコレクションを返すため、lengthと組み合わせるだけで簡単に総数を求めることができます。

anchorsプロパティの基本

document.anchorsは、HTML文書内に存在するname属性付きの<a>要素をまとめて管理するコレクションです。以下のように記述することで、アンカーの総数を取得できます。

var val = document.anchors.length;

サンプルコード

実際に、次のコードを実行してJavaScriptでアンカーの数を取得してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <a href="https://www.tutorialspoint.com/php" name="PHP">PHP</a>
      <br>
      <a href="https://www.tutorialspoint.com/java/" name="Java">Java</a>
      <br>
      <a href="https://www.tutorialspoint.com/html5/" name="HTML5">HTML</a>
      <br>
      <a href="https://www.tutorialspoint.com/css/" name="CSS">CSS</a>
      <script>
         var val = document.anchors.length;
         document.write("<br>ドキュメント内のアンカーの数: "+val);
      </script>
   </body>
</html>

実行結果

このコードでは4つのアンカーが定義されているため、実行すると画面に「ドキュメント内のアンカーの数: 4」と表示されます。

補足：現代的な代替手段

document.anchorsは歴史のあるAPIですが、現在では非推奨（deprecated）の扱いになっています。最新のブラウザ環境では、より柔軟に要素を指定できるquerySelectorAll()を使用する方法が推奨されます。

// ページ内のすべてのa要素の数を取得
var count = document.querySelectorAll('a').length;

// name属性を持つアンカーのみをカウントする場合
var namedAnchors = document.querySelectorAll('a[name]').length;

目的に応じて適切な方法を選択することで、正確で保守性の高いコードを書くことができます。

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

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

  2. JavaScriptで指定した個数の要素による配列の重複順列をすべて生成する方法

    はじめに リテラル値の配列を第1引数として、数値を第2引数として受け取るJavaScript関数を作成する必要があります。この関数は、第2引数で指定された個数と同じ長さを持ち、入力配列の要素から作り得るすべての順列（重複あり）を格納した配列を返すものです。 要件の整理 例えば、入力配列と数値が以下のような場合を考えてみましょう。 const arr = [k, 5]; const num = 3; この場合、期待される出力は次のようになります。各要素は長さ3の配列で、「k」と「5」の組み合わせがすべて網羅されています。 const output = [    &n