.querySelectorAll()

JavaScriptの.querySelectorAll()でaタグにtarget=”_blank”とrel属性を追加

2022年4月3日2022年4月9日 3分

WordPress 4.8 ぐらいからリンクにtarget=”_blank”を付けると自動的に「noopener noreferrer」が付与されるようになっています。

このtarget=”_blank”とrel=”noopener noreferrer”を、a タグに付与するコードをJavaScriptで作ってみました。

かかかず

簡単なコードですが、その解説です。

.querySelectorAll()
aタグにtarget=”_blank”を追加したサンプル
実装の手順と方法
ざっくりとしたコードの解説
- HTML
- JavaScript
さいごに

.querySelectorAll()

JavaScriptの querySelectorAll() は、指定したCSSにセレクターに一致するNodeを返すメソッドです。

elementList = parentNode.querySelectorAll('CSSのセレクタ');

NodeList はNodeの集合体で、Nodeは要素1つ1つを指すものとして使われます。

かかかず

ので、Nodeは「点」。NodeListは点と点が集まった「線」のようなものです。

aタグにtarget=”_blank”を追加したサンプル

早速サンプルです。

以下 a タグの「サンプルリンク」に別タブでページを開くtarget="_blank"と、rel=”noopener noreferrer” をJavaScriptで追加しています。

かかかず

Chromeのデベロッパーツールで確認すると、target=”_blank” が追記されているので、確認してみてください。

target=”_blank”には、この2つのrel属性をつけることが推奨されるので、詳しくは以下の記事もご覧ください。

2021年7月11日rel属性noopener・noreferrer・noopener・sponsoredの効果と役割

実装の手順と方法

実装の手順と方法について、まずは簡単に解説します。

HTMLを記述

HTMLを設置したい場所に記述します。

コードを表示

<ul class="linkList">
<li><a href="https://dubdesign.net/">サンプルリンク1</a></li>
<li><a href="https://dubdesign.net/">サンプルリンク2</a></li>
<li><a href="https://dubdesign.net/">サンプルリンク3</a></li>
</ul>

基本、この記事のスニペットはページ内の a タグを全て取得した上で、「target="_blank"」の付与をURL別にする・しないにしてくれます。

ので、設置条件によっては割愛してOKです。

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

//aタグを取得
const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  // aタグに追加
  for (i = 0; i < hrefLink.length; i++) {
  hrefLink[i].target = "_blank";
  hrefLink[i].rel = "noopener noreferrer";
  }
console.log(hrefLink)
});

かかかず

これで完了です。

ざっくりとしたコードの解説

コードは、HTML・JavaScriptの2種です。見た目やレイアウトは特にいじっていないので、CSSは割愛します。

HTML

HTMLは、li の中に a タグを入れたシンプルなつくりです。ここで記述したa タグに、 taeget="_blank" の記述はありません。

<ul class="linkList">
<li><a href="https://dubdesign.net/">サンプルリンク1</a></li>
<li><a href="https://dubdesign.net/">サンプルリンク2</a></li>
<li><a href="https://dubdesign.net/">サンプルリンク3</a></li>
</ul>

JavaScript

JavaScriptは、.querySelectorAll で取得する a タグを指定して、取得した要素全てに for文のループで target="_blank"と、rel=”noopener noreferrer” を付与します。

//aタグを取得
const hrefLink = document.querySelectorAll('.linkList li a');
window.addEventListener("DOMContentLoaded", () => {
  // aタグに追加
  for (i = 0; i < hrefLink.length; i++) {
  hrefLink[i].target = "_blank";
  hrefLink[i].rel = "noopener noreferrer";
  }
console.log(hrefLink)
});

かかかず

これだけで target="_blank" を付与する簡単なコードです。