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

JavaScriptでarea要素のhref属性からパス名（pathname）を取得して表示する方法

パス名の取得方法

JavaScriptでarea要素のhref属性に含まれるパス名（pathname）部分を取得するには、pathnameプロパティを使用します。このプロパティは、リンク先URLのうちドメイン名やクエリ文字列を除いたパス部分のみを文字列として返します。

たとえば、href属性が「about.htm」のような相対パスで指定されている場合でも、現在のページを基準としたパス名が自動的に解決されて返されます。

サンプルコード

以下のコードを実行すると、area要素のパス名部分が画面に表示されます。

<!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" target = "_self" >
      </map>
      <script>
         var x = document.getElementById("myarea").pathname;
         document.write("<br>Pathname: "+x);
      </script>
   </body>
</html>

コードの解説

このサンプルでは、まずusemap属性を持つ画像と、それに対応するmap要素内にcircle型のarea要素を定義しています。その後、スクリプト内でgetElementById()メソッドを使ってid「myarea」のarea要素を取得し、pathnameプロパティの値を変数xに格納しています。

実行結果として、「Pathname: /about.htm」のように、href属性のパス名部分が出力されます。画像マップの各リンク領域の遷移先を動的に確認したい場合などに便利なテクニックです。

  1. CSSとJavaScriptを使ってドロップダウンメニュー内の項目を検索・絞り込む方法

    CSSとJavaScriptを組み合わせることで、ドロップダウンメニュー内の項目をキーワードでリアルタイムに検索（絞り込み）できます。ボタンをクリックするとメニューが開き、検索フィールドに入力した文字列に一致する項目だけが表示される、実用的なUIパターンです。 実装例 以下は、ドロップダウンメニューに検索機能を実装した完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scal

  2. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &