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

JavaScriptでエリア（area）要素のhref属性からハッシュ部分を取得する方法

JavaScriptを使って、<area>要素の href 属性に含まれるハッシュ部分（#以降の文字列）を取得したい場合は、hash プロパティを利用します。

hash プロパティは、リンクURLの中で「#」記号以降の部分（アンカー名やフラグメント識別子）を文字列として返します。ハッシュが含まれていない場合は、空文字列が返されます。

サンプルコード

以下のコードでは、イメージマップ内の <area> 要素に対して getElementById() でアクセスし、hash プロパティを使ってハッシュ部分を取得して表示しています。

<!DOCTYPE html>
<html>
   <body>
      <img src = "/images/html.gif" alt = "HTML Map" border = "0" usemap = "#html"/>
      <map name = "html">
         <area id="myarea" shape = "circle" coords = "154,150,59" href =
         "about.htm#name" alt = "Team" target = "_self" >
      </map>
      <script>
         var x = document.getElementById("myarea").hash;
         document.write("<br>Hash: "+x);
      </script>
   </body>
</html>

コードの解説

上記の例では、<area> 要素の href 属性が「about.htm#name」と設定されているため、実行結果として「Hash: #name」というように、ハッシュ部分である「#name」が出力されます。

なお、現代のWeb開発では document.write() の代わりに、textContent や innerHTML を使ってDOM要素へ出力する方法が推奨されます。また、URL全体を解析したい場合には、より柔軟な URL オブジェクトや URLSearchParams の活用も検討するとよいでしょう。

  1. JavaScriptでオブジェクトの長さを取得する方法を解説！Object.keys()の活用術

    JavaScriptにおいて、lengthプロパティは配列や文字列にのみ適用できる仕様になっています。そのため、オブジェクトに対してlengthプロパティを呼び出すと、undefinedが返されます。オブジェクトにlengthを使った場合の挙動<html> <body> <script>     var object = {prop:1, prop:2};     document.write(object.length); </script> </body&g

  2. JavaScriptでページ内リンクのhref属性を取得する方法｜document.linksの使い方を解説

    JavaScriptでリンクのhref属性を取得する方法JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。例1：3番目のリンクのhref属性を取得