HTML DOM アンカーの origin プロパティの使い方とサンプルコード
HTML DOM の Anchor（アンカー）オブジェクトが持つ origin プロパティは、href 属性に設定された URL のうち、プロトコル・ホスト名・ポート番号をまとめて取得するためのものです。たとえば https://www.demo.com:6064 のような形式の文字列が返されます。
origin プロパティの構文
基本的な書き方は以下のとおりです。
anchorObj.origin
アンカー要素を表すオブジェクトに対して origin を参照するだけで、URL のオリジン部分（スキーム＋ホスト＋ポート）を文字列として受け取れます。
実装例：href・origin・hreflang を表示するデモ
ここでは、リンク要素から href、origin、hreflang の各値をボタン操作で表示するサンプルを紹介します。
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://www.abc.com:6064/abc/products.html">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display href Part</button>
<button onclick="display2()">Display origin</button>
<button onclick="display3()">Display hreflang</button>
<script>
function display() {
var a = document.getElementById("mylink").href;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").origin;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>
コードの解説
このサンプルでは、id="mylink" を持つアンカー要素に対して、3つのボタンそれぞれで異なる関数を呼び出しています。
- display()：
hrefプロパティで完全な URL を取得し、表示します。 - display2()：
originプロパティで「https://www.abc.com:6064」というオリジン部分のみを取得します。 - display3()：
hreflangプロパティでリンク先の言語コード（この例では「en」）を取得します。
取得した値は、いずれも id="myid" の見出し要素の innerHTML に代入されることで画面に反映されます。
実行結果
ページを開くと、「Products」というリンクと3つのボタンが表示されます。ここで「Display origin」ボタンをクリックすると、次のようにオリジン部分が出力されます。
このように origin プロパティを使うことで、パスやクエリ文字列を除いた URL の基本部分だけを簡単に取り出せます。同一オリジンかどうかの判定など、セキュリティ関連の処理でも活用される便利なプロパティです。
-
HTML DOMアンカーのhostnameプロパティの使い方を解説
HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）hostname：ホスト名のみを返す（例：www.demo.com）hostnameプロパティを設定する構文hostnameプロパティに値を設定する場合は、以下のように記述します。anchorObj.hostname = hostname上記の「hostname」には、設定したいUR
-
HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説
HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明