JavaScriptのリンクオブジェクト(window.document.links,href,protocol,host,pathname,target)
以下は本ページ内の目次です。各見出しにジャンプすることができます。
リンクオブジェクトの概要
リンクオブジェクト(Link)は、HTMLドキュメント内に含まれるリンク(<a>
タグ)を操作するためのJavaScriptオブジェクトです。このオブジェクトを利用することで、リンクのプロパティを取得したり、操作したりできます。
リンクオブジェクトを扱う主な目的として以下のようなものがあります:
- リンクのURLやテキストを取得する
- リンクの属性(
target
やrel
など)を変更する - リンクを動的に生成または削除する
window.document.links
window.document.links
は、ドキュメント内のすべてのリンク(<a>
タグ)を配列のような形式で取得するプロパティです。このプロパティを使えば、複数のリンクを一度に操作できます。
主な特徴:
- リンク要素をリスト形式で取得
length
プロパティでリンクの総数を取得可能- インデックス番号で個別のリンク要素にアクセス可能
例:
// ドキュメント内のリンクの数を取得
console.log(document.links.length);
// すべてのリンクのhref属性を表示
for (let i = 0; i < document.links.length; i++) {
console.log(document.links[i].href);
}
リンクオブジェクトのプロパティとメソッド
リンクオブジェクトでは、さまざまなプロパティを利用してリンクの情報を取得できます。以下は主なプロパティとその詳細です。
href
リンクの完全なURLを取得または設定します。
例:
// 最初のリンクのURLを取得
console.log(document.links[0].href);
// 最初のリンクのURLを変更
document.links[0].href = "https://example.com";
protocol
リンクのプロトコル(例:http:
やhttps:
)を取得します。
例:
// 最初のリンクのプロトコルを表示
console.log(document.links[0].protocol);
host
リンクのホスト名とポート番号を取得します。
例:
// 最初のリンクのホストを取得
console.log(document.links[0].host);
hostname
ホスト名のみを取得します。
例:
// 最初のリンクのホスト名を表示
console.log(document.links[0].hostname);
pathname
リンクのパス(パス部分のみ)を取得します。
例:
// 最初のリンクのパスを取得
console.log(document.links[0].pathname);
search
リンクのクエリ文字列を取得します。
例:
// 最初のリンクのクエリ文字列を取得
console.log(document.links[0].search);
hash
リンクのハッシュ(例:#section1
)を取得します。
例:
// 最初のリンクのハッシュを表示
console.log(document.links[0].hash);
target
リンクのターゲット(例:_blank
や_self
)を取得または設定します。
例:
// 最初のリンクのターゲットを変更
document.links[0].target = "_blank";
text
リンクテキストを取得または設定します。
例:
// 最初のリンクのテキストを表示
console.log(document.links[0].text);
// 最初のリンクのテキストを変更
document.links[0].text = "新しいリンクテキスト";
handleEvent(event)
イベントハンドラーをカスタムオブジェクトで定義する際に使用できます。
例:
// カスタムイベントハンドラーを定義
let handler = {
handleEvent(event) {
console.log("リンクがクリックされました: " + event.target.href);
}
};
// 最初のリンクにイベントハンドラーを追加
document.links[0].addEventListener("click", handler);
実例での活用方法
ここではリンクオブジェクトを使った実用的な例をいくつか紹介します。
すべてのリンクのターゲットを変更
// すべてのリンクを新しいタブで開くように設定
for (let link of document.links) {
link.target = "_blank";
}
特定のドメインのリンクだけを取得
// example.comのリンクをすべて表示
for (let link of document.links) {
if (link.hostname === "example.com") {
console.log(link.href);
}
}
リンクテキストの一覧を取得
// すべてのリンクのテキストを表示
for (let link of document.links) {
console.log(link.text);
}
リンクにイベントを追加
// すべてのリンクにクリックイベントを追加
for (let link of document.links) {
link.addEventListener("click", (event) => {
event.preventDefault(); // デフォルト動作を停止
console.log("リンクがクリックされました: " + link.href);
});
}
以上がJavaScriptにおけるリンクオブジェクトの詳細解説です。これらを活用すれば、リンクを動的に操作する柔軟なアプリケーションを構築できます。