JavaScriptでa要素のhref属性を操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでa要素のhref属性を操作する方法について現役エンジニアが解説しています。a要素は他のページへ移動できるリンクを作成するのに利用されます。JavaScriptではa要素を取得してからhref属性の値を変更することが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでa要素のhref属性を操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでa要素のhref属性を操作する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

a要素とhref属性

a要素とは、HTMLで記述できる要素の1つで他のページへのリンクを作成するのに利用されます。

a要素は他の要素と同様にいくつかの属性(プロパティ)を持っています。href属性は、リンク先のURLを指定する属性です。例えば、href=”https://google.com”と設定すれば、グーグルのトップページへのリンクを作成することができます。

a要素でリンクを作成する場合、以下のように記述します。

<a href='URL'>リンク名</a>

例えば、先ほどのgoogleのトップページへのリンクであれば、

<a href='https://google.com'>googleへのリンク</a>

というように書きます。

JavaScriptでa要素のhref属性を操作する方法

JavaScriptでaタグの操作する場合、document.getElementByIdなどでa要素を取得するのがよく使用する方法です。例えば、googleのリンクからyahooのリンクに書き換える場合は以下のように書きます。

<a id="sample" href='https://google.com'>googleへのリンク</a>
<script>
  var target = document.getElementById("sample")
  target.href = "https://www.yahoo.co.jp"
</script>

これで、リンクの移動先がグーグルからヤフーに切り替わります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。

今回はボタンを押すと、a要素のhref属性とテキストがyahooに書き換わるものを書いてみます。a要素のhrefには、初めはgoogleのリンクを書いておきます。ボタンを押すと、changeHrefが実行されてhrefとテキストが書き換わります。

<a id="sample" href="https://google.com">google</a>

<button onclick="changeHref()">change</button>

<script>
 const target = document.getElementById("sample")

 const changeHref = () => {
   target.href = "https://www.yahoo.co.jp"
   target.textContent = "Yahoo"
 }
</script>

以上で解説を終わります。

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。