【JavaScript】要素が指定した属性を持っているか判定する【hasAttribute】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで要素が指定した属性を持っているか判定する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

element.hasAttributeで属性を持っているか判定する

hasAttributeは、要素が指定した属性を持っているか判定することができるelementのメソッドです。引数に指定した属性を持つかどうかを真偽値（Boolean）で返します。

hasAttributeの構文は下記の通りです。

//属性を持っているか判定したい要素を取得
const el = document.getElementById('element');

//属性を持っているか真偽値を返す
const result = el.hasAttribute('attributeName');

取得したelementのhasAttributeを呼び出し、引数に持っているか判定したい属性名を指定します。resultには引数に指定した属性を持っている場合はtrueが、持っていない場合はfalseが代入されます。

実際の属性名を指定すると下記のようになります。

const el = document.getElementById('section1');
const result = el.hasAttribute('id');

elに代入された要素がid属性を持っている場合はresultにtrueが、持っていない場合はfalseが代入されます。実際に使用する場合は三項演算子やif文などで条件分岐して使用するケースが多いかと思います。ですので簡単なものになりますがサンプルスクリプトをご紹介できればと思います。

要素が指定した属性を持っているか判定して処理する

ではサンプルスクリプトを作成します。実装する内容は下記のようにします。

• idを指定して要素を取得する
• 要素がclassを持っているか判定する
• classを持っていない場合はaddというclassを新しく追加する

上記の内容を実装したスクリプトがこちら！

HTML

<div id="app">
    <h1>Into the Program</h1>
</div>

JavaScript

const el = document.getElementById('app');
const result = el.hasAttribute('class');

if(!result){
    el.setAttribute('class', 'add');
}

下記は上記の内容を反映したデモです。開発ツールで確認していただくと、HTML記述時点では指定していないaddというclassが追加されているかと思います。

See the Pen hasAttribute｜JavaScript by ryohei (@intotheprogram) on CodePen.

要素が指定した属性を持っているか判定して処理することができています。

最後に

要素が属性を持っているか判定して次へ進むという処理は、本記事のサンプルでご紹介したようなclassを付与したりといった面で使用することが多いです。hasAttributeは真偽値を返すという単純な機能ですし、名前もそのままなので使いやすいメソッドです。今後属性を持っているか判定する際にぜひご使用いただければと思います。

以上、JavaScriptで要素が指定した属性を持っているか判定するhasAttributeのご紹介でした！