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

HTML DOM アンカーコレクション（document.anchors）とは？使い方と実例を解説

HTML DOM のアンカーコレクション（Anchor Collection）は、HTML ドキュメント内に存在するすべてのアンカータグ（<a>）のコレクションを返すための機能です。ただし、name 属性が設定されているリンクのみがカウントの対象となる点に注意してください。なお、name 属性は現在の HTML5 では非推奨（deprecated）とされています。コレクション内の要素は、HTML ソースコード内に記述された順序と同じ順序で格納されます。

アンカーコレクションのプロパティ

アンカーコレクションには、以下のプロパティが用意されています。

プロパティ説明
lengthHTML ドキュメント内に存在するリンク（<a>）の総数を返します。

アンカーコレクションのメソッド

アンカーコレクションには、以下のメソッドが用意されています。

メソッド説明
[index]指定したインデックス位置にあるリンクを返します。インデックスは 0 から始まり、ドキュメントの上から下へと順に数えられます。該当する要素が存在しない場合は null が返されます。
item(index)指定したインデックス位置にあるリンクを返します。インデックスは 0 から始まります。該当する要素が存在しない場合は null が返されます。
namedItem(id)コレクションから、指定した id に一致するリンクを返します。該当する要素が存在しない場合は null が返されます。

構文

アンカーコレクションを取得するための構文は以下のとおりです。

document.anchors

注意 − アンカーコレクションは読み取り専用のため、値を設定（代入）することはできません。

使用例

それでは、アンカーコレクションの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a><br>
<p>Click the button to get first link text in the above list</p>
<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>
<p id="sample"></p>
<script>
   function getCollection() {
      var x = document.anchors[0].innerHTML;
      document.getElementById("sample").innerHTML = x;
   }
   function getLength() {
      var x = document.anchors[0].innerHTML.length;
      document.getElementById("sample").innerHTML = x;
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM アンカーコレクション（document.anchors）とは？使い方と実例を解説

「Collection」ボタンをクリックした場合：

HTML DOM アンカーコレクション（document.anchors）とは？使い方と実例を解説

「Length」ボタンをクリックした場合：

HTML DOM アンカーコレクション（document.anchors）とは？使い方と実例を解説

コードの解説

この例では、まず name 属性にそれぞれ「example」「example1」「example2」が設定された 3 つのリンクを配置しています。

<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a> <br>

次に、getCollection() 関数と getLength() 関数をそれぞれ呼び出すための 2 つのボタンを用意しています。

<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>

getCollection() 関数は、インデックス 0 の位置にあるアンカータグのテキストを返します。この例では「Sample1」が表示されます。一方、getLength() 関数はリンクテキストの文字数を返します。リンクテキストが「Sample1」であるため、返される値は 7 となります。


  1. HTML DOM テーブルの tBodies コレクションとは？基本構文と使い方を徹底解説

    HTML DOM の table tBodies コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tbody> 要素をコレクションとして取得するための機能です。テーブル内の tbody 要素の数を調べたり、特定の tbody にアクセスしたりする際に活用できます。 tBodies コレクションの基本構文 tBodies コレクションを使用する際の構文は以下の通りです。 object.tBodies tBodies コレクションのプロパティ プロパティ説明 lengthコレクション内に含まれる <tbody> 要素の数を返します。 tB

  2. HTML DOM テーブルの rows コレクションとは？使い方をサンプルコード付きで解説

    HTML DOM のテーブル rows コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tr> 要素のコレクションを返します。このコレクションを利用すると、JavaScript からテーブルの行数を取得したり、特定の行にアクセスしたりすることが簡単に行えます。構文rows コレクションの構文は以下のとおりです。object.rowsrows コレクションのプロパティrows コレクションには、以下のプロパティが用意されています。プロパティ説明lengthHTML ドキュメント内のコレクションに含まれる <tr> 要素の数を返します。rows コレ