HTML要素が特定の属性を持つか確認する

HTML要素の属性を確認する

HTML要素が特定の属性を持っているか確認するときは、hasAttributeメソッドを使います。
パラメータに属性名を渡すと、HTML要素がその属性を持っていたらtrue、持っていなければfalseを返します。

今回は以下のHTMLコードを使って、hasAttributeメソッドで属性の確認をしていきます。

HTML コード例

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

以下の例では、上記のHTMLコードからa要素を取得して、target属性があるかどうかを確認します。

JS コード例

// a要素を取得
let a_elements = document.querySelectorAll("a");

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

	// target属性があるか確認する
	console.log(a_elements[i].hasAttribute("target")); // true
}

a要素の取得ではquerySelectorAllメソッドを使っています。
querySelectorAllメソッドは全てのHTML要素を配列形式で取得することができるため、続くfor文は取得したHTML要素の数だけループ処理が実行されます。

その中で、target属性を持つことを確認するためにhasAttributeメソッドを実行します。

上記の例は属性の有無のみを確認していますが、有無を確認したあとに特定の値が設定されていることを確認するときはgetAttributeメソッドを使うことで実現することができます。
以下の例では、hasAttributeメソッドに続いてgetAttributeメソッドを実行し、値の確認までを行います。

JS コード例

// a要素を取得
let a_elements = document.querySelectorAll("a");

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

	// target属性があるか確認する
	console.log(a_elements[i].hasAttribute("target") && a_elements[i].getAttribute("target") === '_blank');
}

「a_elements[i].getAttribute("target")」で値を取得し、厳密等価演算子「===」を使って値が「_blank」であるか確認します。
この値の確認をhasAttributeメソッドの確認と論理積「&&」で繋げることで、属性の有無と値をどちらも確認することができます。

なお、論理積による確認は前方がfalseになると後方の確認はスキップされるため、hasAttributeメソッドで属性がない場合は続くgetAttributeメソッドの確認は行われません。

HTML要素が持つ属性を確認することができると、特定の属性がある場合に別の属性を付け加えるようなことができます。
以下の例は、a要素がtarget属性に「_blank」を持つときに、rel属性を設定します。

JS コード例

// 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");
	}
}

こちらのコードは、a要素で外部リンクが設定されている場合に限り、setAttributeメソッドを使ってrel属性を設定し、外部サイトとの関連性を否定する値を設定します。