HTML DOMアンカーのhostnameプロパティの使い方を解説
HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。
- host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）
- hostname：ホスト名のみを返す（例：www.demo.com）
hostnameプロパティを設定する構文
hostnameプロパティに値を設定する場合は、以下のように記述します。
anchorObj.hostname = hostname
上記の「hostname」には、設定したいURLのホスト名を指定します。
hostnameプロパティを取得する構文
現在設定されているホスト名を取得する場合は、以下のように記述します。
anchorObj.hostname
実装例
それでは、DOM Anchorのhostnameプロパティを使った具体的な実装例を見てみましょう。以下のサンプルコードでは、hash・host・hostnameの3つのプロパティの違いを、それぞれ専用のボタンで確認できるようにしています。
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" href="https://www.demo.com:6064/abc/def.html#myteam">Our Team</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display Anchor Part</button>
<button onclick="display2()">Display Host Part</button>
<button onclick="display3()">Display Hostname</button>
<script>
function display() {
var a = document.getElementById("mylink").hash;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").host;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hostname;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>出力結果
このコードをブラウザで実行すると、次のような画面が表示されます。
続いて、「Display Hostname」ボタンをクリックすると、URLからホスト名のみが抽出されて表示されます。
まとめ
hostnameプロパティを使えば、アンカー要素のURLからドメイン名だけを簡単に取り出すことができます。ポート番号が不要なケースや、ドメイン単位で処理を分岐させたい場合に特に便利です。hostプロパティとの違い（ポート番号を含むかどうか）もあわせて覚えておきましょう。
-
HTML DOM アンカーのsearchプロパティとは?使い方とサンプルコードで解説
HTML DOM アンカーのsearchプロパティとはHTML DOM の search プロパティは、アンカータグ(<a>)に関連付けられたプロパティの一つで、href 属性値に含まれるクエリ文字列(query string)部分を取得または設定します。クエリ文字列とは、URL 内の「?」以降の部分を指します。主にサーバーへ情報を渡す目的で使用され、GET リクエストを送信する際に、パラメータ情報が平文のままリンク(URL)に埋め込まれる形になります。構文a) search プロパティの値を取得する場合anchorObject.searchb) search プロパティに値を設定
-
HTML DOMアンカーのrelプロパティとは？取得・設定方法をわかりやすく解説
HTML DOMのrelプロパティは、リンク（<a>タグ）のrel属性の値を取得または設定するためのプロパティです。rel属性は「relation（関係）」の略で、現在のドキュメントとリンク先のドキュメントとの関係性を記述します。 構文 relプロパティの構文は以下の通りです。 ① 値を取得する場合 anchorObject.rel ② 値を設定する場合 anchorObject.rel = 値 サンプルコード HTML DOMアンカーのrelプロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <body>