HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Anchor hash プロパティとは？使い方をサンプルコードで解説

HTML DOM Anchor hash プロパティとは

HTML DOM の Anchor hash プロパティは、href 属性の値に含まれる「アンカー部分」を設定（set）または取得（return）するために使用されます。URL において「#」記号以降の部分が、リンクのアンカー部分（フラグメント識別子）に該当します。

なお、このプロパティで取得できる値には「#」記号自体も含まれる点に注意してください。URL にアンカーが存在しない場合は、空の文字列が返されます。

hash プロパティを設定する構文

anchorObject.hash = anchor_part

上記の anchor_part には、設定したい URL のアンカー部分を指定します。

hash プロパティを取得する構文

anchorObject.hash

引数を指定せずに呼び出すことで、現在設定されているアンカー部分を文字列として取得できます。

実装例

それでは、DOM Anchor hash プロパティを実際に実装した例を見てみましょう。以下のサンプルでは、リンクからアンカー部分を取得し、ボタンをクリックすると画面に表示されます。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" href="https://www.demo.com/abc/def.html#myteam">Our Team</a></p>
<p>Get the anchor part...</p>
<h2 id="myid"></h2>
<button onclick="display()">Display Anchor Part</button>
<script>
   function display() {
      var a = document.getElementById("mylink").hash;
      document.getElementById("myid").innerHTML = a;
   }
</script>
</body>
</html>

出力結果

ページを表示すると、リンクとボタンが以下のように表示されます。

HTML DOM Anchor hash プロパティとは？使い方をサンプルコードで解説

次に、「Display Anchor Part」ボタンをクリックすると、リンクの href 属性から取得したアンカー部分（#myteam）が画面に表示されます。

HTML DOM Anchor hash プロパティとは？使い方をサンプルコードで解説

まとめ

Anchor hash プロパティを使えば、JavaScript だけで URL のアンカー部分を簡単に読み取ったり、書き換えたりできます。ページ内遷移の制御や、URL のフラグメントに応じた動的な処理を実装したい場合に非常に便利なプロパティです。


  1. HTML DOMアンカーのrelプロパティとは？取得・設定方法をわかりやすく解説

    HTML DOMのrelプロパティは、リンク（<a>タグ）のrel属性の値を取得または設定するためのプロパティです。rel属性は「relation（関係）」の略で、現在のドキュメントとリンク先のドキュメントとの関係性を記述します。 構文 relプロパティの構文は以下の通りです。 ① 値を取得する場合 anchorObject.rel ② 値を設定する場合 anchorObject.rel = 値 サンプルコード HTML DOMアンカーのrelプロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <body>

  2. 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