HTML DOMのlinksコレクションとは？使い方とサンプルコードを解説
links コレクションは、HTML DOMにおいて、ドキュメント内に存在するすべての <a> 要素および <area> 要素（リンク）の一覧を取得できる機能です。ページ内のリンク情報をまとめて操作したい場合に非常に便利です。
構文
links コレクションを取得するための基本的な構文は以下の通りです。
document.links
プロパティとメソッド
「links」コレクションには、以下のプロパティおよびメソッドが用意されています。
| プロパティ／メソッド | 説明 |
|---|---|
| length | ドキュメント内の <a> 要素および <area> 要素の総数を返します。 |
| namedItem() | 指定した id 属性を持つ <a> 要素または <area> 要素を返します。 |
使用例
ここでは、links コレクションの length プロパティを使用した具体例を見てみましょう。ボタンをクリックすると、ページ内のリンク数とその内容が表示されます。
<!DOCTYPE html>
<html>
<head>
<title>Links Collection length</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
area {
border:1px solid black;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Links-Collection-length</legend>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
<input type="button" value="Get Links" onclick="getLinks()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function getLinks(){
var links = document.links.length;
divDisplay.textContent = 'Total Links: '+links;
for (var i = 0; i < links; i++) {
divDisplay.textContent += '--> '+document.links[i]+' ';
}
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Get Links」ボタンをクリックする前：
「Get Links」ボタンをクリックした後：
このように、document.links を使えば、ページ内のリンク数を簡単に取得できるだけでなく、インデックスを指定して個々のリンク要素へアクセスすることも可能です。リンクの一括管理や動的な操作を行いたい場合にぜひ活用してみてください。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注