別タブを開くリンク「_blank」に「rel="noopener"」を付与する

a要素のtarget属性を確認してrel属性を設定する

ページ中にリンクを設定する際はa要素を使いますが、外部サイトへのリンクはtarget属性に「_blank」を設定します。
外部サイトへのリンクにはtarget属性とあわせて、rel属性を設定する場合も多いと思います。

a要素に1つずつ手動で属性を記述することもできますが、ページが読み込まれたタイミングにJavaScriptを実行して自動的にrel属性を設定することも可能です。

今回は以下のHTMLコードに対して、「target="_blank"」が設定されたリンクに対して「rel="noopener"」を設定していきます。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p>テキスト<a href="#">リンクテキスト</a></p>
	<p>テキスト<a href="https://gray-code.com" target="_blank">リンクテキスト</a></p>
	<p>テキスト<a href="https://gray-code.com" target="_blank">リンクテキスト</a></p>
	<ul>
		<li><a href="https://gray-code.com" target="_blank">リンク1</a></li>
		<li><a href="#">リンク2</a></li>
		<li><a href="https://gray-code.com" target="_blank">リンク3</a></li>
	</ul>
</article>

こちらのHTMLコードに対して、以下のJavaScriptをページ読み込み時に実行してrel属性を追記します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

// ページにあるa要素から「target=_blank」が設定された要素を取得
let a_elements = document.querySelectorAll("a[target=_blank]");

for(let i=0; i<a_elements.length; i++) {

	// rel属性を設定
	a_elements[i].setAttribute("rel","noopener");
}

});

このコードを実行すると、先ほどのHTMLコードは以下のようになります。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<p>テキスト<a href="#">リンクテキスト</a></p>
	<p>テキスト<a href="https://gray-code.com" target="_blank" rel="noopener">リンクテキスト</a></p>
	<p>テキスト<a href="https://gray-code.com" target="_blank" rel="noopener">リンクテキスト</a></p>
	<ul>
		<li><a href="https://gray-code.com" target="_blank" rel="noopener">リンク1</a></li>
		<li><a href="#">リンク2</a></li>
		<li><a href="https://gray-code.com" target="_blank" rel="noopener">リンク3</a></li>
	</ul>
</article>

JavaScriptで実行している内容を解説します。

まず、ページ読み込みが完了したタイミングにコードを実行するようイベントリスナーに「DOMContentLoaded」を登録します。

その後、ページ中にある全てのa要素から、「target="_blank"」が設定された要素だけを取得するためにquerySelectorAllメソッドを実行します。
querySelectorAllメソッドはパラメータにHTML要素名だけでなく、CSSのセレクタと同様に属性を「a[target=_blank]」を指定して、合致する要素を全て取得することができます。

続いて、for文を使って取得したa要素の数だけループ処理を繰り返し、setAttributeメソッドでrel属性を設定します。

以上が上記コードの流れとなります。
もしrel属性に「noopener」の他に「nofollow」など他の値を設定したいときは、以下のように半角スペースで区切って指定することで追記が可能です。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

let a_elements = document.querySelectorAll("a[target=_blank]");

for(let i=0; i<a_elements.length; i++) {

	// rel属性を設定
	a_elements[i].setAttribute("rel","noopener nofollow");
}

});

メソッドで属性の値を確認して設定する

先述した方法ではquerySelectorAllメソッドのセレクタを使って設定するa要素を取得しました。
ここではもう1つ、hasAttributeメソッドとgetAttributeメソッドを使って属性の値を確認する方法を解説します。

以下のコードではhasAttributeメソッドでtarget属性の有無を調べたうえで、getAttributeメソッドで値が「_blank」であるかを確認し、設定されていたらrel属性を追記します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

// ページにある全てのa要素を取得
let a_elements = document.querySelectorAll("a");

for(let i=0; i<a_elements.length; i++) {

	// target属性の有無と「_blank」が設定されていることの確認
	if( a_elements[i].hasAttribute("target") && a_elements[i].getAttribute("target") === '_blank' ) {

		// rel属性を設定
	 	a_elements[i].setAttribute("rel","noopener nofollow");
	}
}

});

実行結果は先述したコードと同じ内容になります。