HTML DOMアンカーのrelプロパティとは？取得・設定方法をわかりやすく解説
HTML DOMのrelプロパティは、リンク（<a>タグ）のrel属性の値を取得または設定するためのプロパティです。rel属性は「relation（関係）」の略で、現在のドキュメントとリンク先のドキュメントとの関係性を記述します。
構文
relプロパティの構文は以下の通りです。
① 値を取得する場合
anchorObject.rel
② 値を設定する場合
anchorObject.rel = "値"
サンプルコード
HTML DOMアンカーのrelプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<p><a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">
Anchor Rel Property</a></p>
<p>Click on the button</p>
<button onclick="display()">Click me!</button>
<p id="show"></p>
<script>
function display() {
var docs = document.getElementById("anchorExample").rel;
document.getElementById("show").innerHTML = docs;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のような画面が表示されます。
続いて、「Click me!」ボタンをクリックすると、アンカー要素のrelプロパティの値が画面上に出力されます。
コードの解説
この例では、まずアンカータグにrel属性を指定しています。rel属性は、リンク先のドキュメントとの関係の種類を示すものであり、このコードではリンク先として https://www.examplesite.com/ を設定しています。
<p> <a id="anchorExample" rel="Rel Property" href="https://www.examplesite.com/">Anchor Rel Property</a> </p>
次に、display関数を実行するための「Click me!」ボタンを作成します。
<button onclick="display()">Click me!</button>
display関数では、id="anchorExample" が設定された要素のrelプロパティを取得し、その値を id="show" の要素内に出力しています。
function display() {
var docs = document.getElementById("anchorExample").rel;
document.getElementById("show").innerHTML = docs;
}
ボタンをクリックすると、ページ上に「Rel Property」というテキストが表示され、rel属性の値が正しく取得できていることが確認できます。
-
HTML DOM アンカーのsearchプロパティとは?使い方とサンプルコードで解説
HTML DOM アンカーのsearchプロパティとはHTML DOM の search プロパティは、アンカータグ(<a>)に関連付けられたプロパティの一つで、href 属性値に含まれるクエリ文字列(query string)部分を取得または設定します。クエリ文字列とは、URL 内の「?」以降の部分を指します。主にサーバーへ情報を渡す目的で使用され、GET リクエストを送信する際に、パラメータ情報が平文のままリンク(URL)に埋め込まれる形になります。構文a) search プロパティの値を取得する場合anchorObject.searchb) search プロパティに値を設定
-
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