JavaScriptでHTML属性値を変更する方法

JavaScriptを使用してHTML要素の属性値を変更する方法を学びます。

ウェブサイトにアンカー要素があり、hrefのURLリンクパスに誤りがあるとします。 属性値。

メニュー/ナビゲーションバーに表示されるのはよくあることです：

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

内部Webページリンクを持つもう1つの一般的な場所は、Webサイトの下部にあるフッターです。

誰かが間違えたとしましょう。あなたのhref 値は/contact-meです ただし、/contact-usである必要があります 、および何らかの理由で、HTMLコードで直接解決することはできません（おそらく、バックエンドに書き込みアクセス権がありません）。

訪問者がクリックしたときに空白のページが表示されないように、できるだけ早く修正する必要があります。

フロントエンドコードにアクセスできる場合（例： CMS（コンテンツ管理システム）を介して、JavaScriptを使用して、バックエンドにまったく触れることなく、アンカー要素の既存のhref値を上書きできます。

それを行う2つの異なる方法を紹介します。

IDに基づいて要素を選択

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

<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>

次に、連絡先リンクのhref値を変更します。

まず、IDに基づいてアンカー/リンク要素を選択します：

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

次に、ドット表記を使用してhrefを選択します アンカー要素の属性を指定し、/contact-usの新しい値を指定します ：

contactLink.href === '/contact-us'

以上です！

これで、コンソールにログインすると、以前の誤ったhref属性値が新しい正しいURLパスに置き換えられたことがわかります。

console.log(contactLink.href)
// output: "https://your-domain.com/contact-us"

すべてのJSコード：

// Select anchor/link element based on its ID
const contactLink = document.querySelector('#contact')

// Change href value
contactLink.href === '/contact-us'

// Print result
console.log(contactLink.href)

特定の文字列値に基づいて要素を選択します

HTMLリンク要素に一意のIDまたはクラスがない状況にある可能性があります。 HTMLマークアップは次のようになります

<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値を出力して、探しているhref値が実際に見つかったかどうかを確認します。

console.log(contactLink.href)
// output: "https://your-domain.com/contact-me" 

やった！

これで、hrefを変更できます 前の例と同じように、正しいURLパスに値を設定します。

contactLink.href === '/contact-us'

すべてのコード：

// Select link with specific href string value
const contactLink = document.querySelector('a[href*="/contact-me"]')

// Change href string value
contactLink.href = '/contact-us'

// Print result
console.log(contactLink.href)