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

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

 

a要素とhref属性

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

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] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

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

今回はボタンを押すと、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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。