JavaScriptでHTML属性値を変更する方法｜href属性を書き換える2つの手法

JavaScriptを使ってHTML要素の属性値を変更する方法を解説します。

たとえば、Webサイト上のアンカー要素の href 属性に、誤ったURLパスが設定されてしまったとします。

こうしたトラブルが起こりやすいのは、メニューやナビゲーションバーです。

<nav>
    <ul>
        <li>
            <a href="/path-to-your-page" id="some-id">Link</a>
        </li>
    </ul>
</nav>

また、サイト最下部のフッターも内部リンクが設置される代表的な場所の一つです。

誰かがミスをして、href の値が /contact-me になっているのに、正しくは /contact-us であるべき——そんな状況を想像してください。何らかの理由でHTMLコードを直接修正できないこともあります（バックエンドへの書き込み権限がない、など）。

訪問者がクリックしたときに空白ページが表示されないよう、早急に対処しなければなりません。

CMS（コンテンツ管理システム）経由でフロントエンドのコードにアクセスできるのであれば、JavaScriptを使ってアンカー要素の既存の href 値を上書きできます。バックエンドには一切手を加える必要がありません。

ここでは、2つの異なる方法をご紹介します。

IDを指定して要素を選択する

各ナビゲーションリンクに一意のIDが付与された、次のようなHTMLマークアップがあるとします。

<nav>
	<ul>
		<li>
			<a href="/" id="home">Home</a>
		</li>
		<li>
			<a href="/services" id="services">Services</a>
		</li>
		<li>
			<a href="/contact-me" id="contact">Contact</a>
		</li>
	</ul>
</nav>

ここでは、Contactリンクの href 値を変更したいと考えます。

まず、IDをもとにアンカー（リンク）要素を選択します。

const contactLink = document.querySelector('#contact')

次に、ドット記法でアンカー要素の href 属性にアクセスし、新しい値 /contact-us を代入します。

contactLink.href = '/contact-us'

これだけです！

コンソールに出力してみると、以前の誤った href 属性値が、新しい正しいURLパスに置き換えられていることが確認できます。

console.log(contactLink.href)
// 出力結果: "https://your-domain.com/contact-us"

JSコード全体：

// IDをもとにアンカー（リンク）要素を選択
const contactLink = document.querySelector('#contact')

// href値を変更
contactLink.href = '/contact-us'

// 結果を出力
console.log(contactLink.href)

特定の文字列値をもとに要素を選択する

HTMLのリンク要素に、一意のIDやクラスが付与されていないケースもあります。その場合、マークアップは次のようになっているでしょう。

<nav>
	<ul>
		<li>
		    <a href="/">Home</a>
		</li>
		<li>
		    <a href="/services">Services</a>
		</li>
		<li>
		    <a href="/contact-me">Contact</a>
		</li>
	</ul>
</nav>

それでも問題ありません。querySelector() にCSS3セレクターを組み合わせれば、特定の文字列値（この場合は /contact-me）を持つ要素を正確に指定して選択できます。

具体的なコードは以下の通りです。

const contactLink = document.querySelector('a[href*="/contact-me"]')

変数から href 値を出力して、目的の値が正しく取得できているか確認してみましょう。

console.log(contactLink.href)
// 出力結果: "https://your-domain.com/contact-me"

しっかり取得できていますね！

あとは前の例と同じように、href 値を正しいURLパスに変更するだけです。

contactLink.href = '/contact-us'

コード全体：

// 特定のhref文字列値を持つリンクを選択
const contactLink = document.querySelector('a[href*="/contact-me"]')

// href文字列値を変更
contactLink.href = '/contact-us'

// 結果を出力
console.log(contactLink.href)