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

JavaScriptでリンクのid属性の値を取得するにはどうすればよいですか？

JavaScriptでリンクのid属性の値を取得する方法

JavaScriptでリンク（<a>タグ）のid属性の値を取得するには、idプロパティを使用します。まずdocument.getElementById()メソッドで対象のアンカー要素を取得し、その要素が持つidプロパティを参照することで、id属性の値を簡単に取り出すことができます。

以下のサンプルコードを実行して、リンクのid属性の値を取得してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <p><a id="anchorid" hreflang="en-us" href="https://www.qries.com/">Qries</a></p>
      <script>
         var myID = document.getElementById("anchorid").id;
         document.write("リンクのid属性の値: "+myID);
      </script>
   </body>
</html>

コードの解説

document.getElementById("anchorid")は、HTML内からidが「anchorid」である要素を検索して返します。続けて.idと記述することで、その要素のid属性の値（ここでは「anchorid」）を文字列として取得できます。

取得した値は変数myIDに格納され、document.write()によって画面に出力されます。実行結果として「リンクのid属性の値： anchorid」と表示されます。

補足：より現代的な出力方法

document.write()は現在では非推奨とされることが多いため、実務ではtextContentやinnerHTMLを使って特定の要素に結果を書き込む方法が推奨されます。例えば、document.getElementById("result").textContent = myID;のように記述すると、ページの一部だけを安全に更新できます。

  1. JavaScriptで画像のuseMap属性の値を取得する方法

    画像要素に設定された usemap 属性の値をJavaScriptで取得したい場合は、useMap プロパティを使用します。このプロパティは、対象の画像がどのイメージマップ（<map> 要素）に関連付けられているかを文字列として返します。以下のコードを実行すると、画像の usemap 属性の値を画面に表示できます。サンプルコード<!DOCTYPE html> <html>    <body>       <img id = "myid" src = "/imag

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

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