JSでhrefを取得するにはどうすればいいですか？

Webページ上でリンクなどの要素をJavaScriptで操作したい場合、href属性の値を取得することがよくあります。例えば、クリックイベントなどでユーザーがどのURLに遷移するかを動的に変更したい場合などが考えられます。この記事では、JavaScriptを使ってhref属性の値を取得する方法について解説します。

aタグのIDを指定してhrefを取得

aタグにIDを指定しておけば、`getElementById`で要素を取得し、その`href`プロパティを参照することでhrefの値を取得できます。 **手順** 1. 対象のaタグにIDを指定する。 2. JavaScriptで`getElementById`を使ってaタグの要素を取得する。 3. 取得した要素の`href`プロパティを参照する。 **HTMLコード例**


<a href="https://www.example.com" id="myLink">サンプルリンク</a>

**JavaScriptコード例**


const link = document.getElementById("myLink");
const href = link.href;
console.log(href); // 出力結果: https://www.example.com

その他の方法

上記以外にも、以下のような方法でhref属性の値を取得できます。

方法	説明
`getElementsByTagName`	HTML内の全てのaタグを取得し、ループ処理などで目的のaタグからhrefを取得する。
`querySelector` / `querySelectorAll`	CSSセレクタを使って目的のaタグを取得し、hrefを取得する。

それぞれの方法の詳細については、MDN Web Docsなどのリファレンスサイトを参照してください。 * [Element.querySelector() - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/API/Element/querySelector) * [Element.querySelectorAll() - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/API/Element/querySelectorAll)

よくある質問

**Q1: JavaScriptでhref属性の値を変更するにはどうすればいいですか？** A1: `要素.href = "新しいURL"`のように、取得した要素の`href`プロパティに新しい値を代入することで変更できます。 **Q2: JavaScriptでリンクの遷移をキャンセルするにはどうすればいいですか？** A2: `event.preventDefault()` を使用します。 **Q3: JavaScriptでhref属性の値を取得する際に、絶対パスを取得するにはどうすればいいですか？** A3: `URL` オブジェクトを使用します。 `const absoluteUrl = new URL(link.href).href;` のように記述することで絶対パスを取得できます。

その他の参考記事:jquery url 取得