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

JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド

Web開発では、アンカータグ(<a>)に設定されたリンク先URL、つまりhref属性の値を取得したい場面がよくあります。この記事では、jQueryのattr()メソッドを使って、簡単にhrefの値を取得する方法を解説します。

対象となるHTMLの例

たとえば、以下のようなアンカータグがあったとします。

<a class="demo" title="get the url" href="./mainPage.jsp/1245">href value at console</a>

ここで必要なのは、テキスト部分ではなく、URLそのもの、すなわちhref属性の値「./mainPage.jsp/1245」です。この値を取得するには、jQueryのattr()メソッドを使用します。

attr()メソッドの基本構文

attr()は、指定した要素の属性値を取得・設定できるjQueryのメソッドです。hrefの値を取得する場合は、引数に「href」を指定します。

attr('href')

サンプルコード全体

以下は、実際に動作する完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <ul class="getURLDemo">
        <li>
            <a class="demo" title="get the url" href="./mainPage.jsp/1245">href value at console</a>
        </li>
    </ul>
</body>
<script>
    var hrefValue = $('ul.getURLDemo li a.demo').attr('href');
    console.log(hrefValue);
</script> 
</html>

コードのポイント

  • セレクタの指定: $('ul.getURLDemo li a.demo')のように、クラス名や階層構造を組み合わせて対象のアンカータグを特定しています。
  • 値の取得: .attr('href')によって、該当要素のhref属性の値を文字列として取得できます。
  • コンソール出力: 取得した値はconsole.log()でブラウザの開発者ツール(コンソール)に出力され、正しく取得できているかを確認できます。

プログラムの実行方法

上記のコードをファイル名「anyName.html(index.html)」など任意の名前で保存します。VSCodeを使用している場合は、保存したファイルを右クリックし、「Open with Live Server」を選択して実行しましょう。Live Serverプラグインがインストールされていない場合は、ファイルを直接ブラウザで開いても動作を確認できます。

実行結果

プログラムを実行すると、ページとコンソールに以下の出力が表示されます。

JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド

コンソールには次のように出力されます。

JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド

このように、console.log(hrefValue)により、「./mainPage.jsp/1245」というhref属性の値がコンソールに出力されます。

まとめ

  • href属性の値を取得するには、jQueryのattr('href')メソッドを使うのが最もシンプルです。
  • セレクタを工夫することで、ページ内の任意のリンクからURLを抜き出せます。
  • 取得した値は変数に格納できるため、条件分岐やAjax通信など、さまざまな処理に活用できます。

ネイティブJavaScriptで同様の処理を行いたい場合は、document.querySelector()で要素を取得し、element.getAttribute('href')やelement.hrefプロパティを使う方法もあります。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでURLからGETパラメータの値を取得する方法

    JavaScriptでは、URLオブジェクトとsearchParamsプロパティを組み合わせることで、URLに含まれるGETパラメータ（クエリ文字列）の値を簡単に取得できます。本記事では、実際のコード例とともにその手順をわかりやすく解説します。 実装例 以下は、サンプルURL「https://www.google.com?imageSize=440&color=blue」から、imageSizeとcolorという2つのGETパラメータの値を取り出して画面に表示するコード例です。 <!DOCTYPE html> <html lang=ja> <head>

  2. JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

    JavaScriptでHTML要素に適用されているCSSプロパティの現在の値（計算済みスタイル）を取得するには、window.getComputedStyle()メソッドを使用します。このメソッドは、対象の要素に適用されたすべてのスタイル情報を含むオブジェクトを返します。返されたオブジェクトに対してgetPropertyValue()メソッドを呼び出せば、任意のCSSプロパティの値を文字列として取得できます。インラインスタイルが設定されていない場合でも、外部CSSや継承によって最終的に適用されている値を取得できるのが大きな特徴です。基本構文const element = document.qu