JavaScript

A simple way to quickly check if an HTML element has a specific attribute or not.

hasAttribute

HTML要素に「この属性は付いているかな？」をサクッと調べて、あるかないかをすぐに判断できるチェック機能。

hasAttribute とは？

hasAttribute() は、あるHTML要素が「指定した属性を持っているかどうか」を確かめるためのメソッドです。

「この要素に disabled は付いている？」「data-id はある？」といった“ある・ない”をシンプルに判定できます。

結果は true（ある） か false（ない） のどちらかなので、条件分岐ととても相性が良いです。

値の中身を読むのではなく、「存在しているか」だけをチェックする点がポイントです。

基本の使い方

JavaScript

const button = document.querySelector('button');

if (button.hasAttribute('disabled')) {
    console.log('このボタンは無効になっています');
} else {
    console.log('このボタンは有効です');
}

よくある利用シーン

属性の有無で処理を切り替える

JavaScript

const link = document.querySelector('a');

if (link.hasAttribute('target')) {
    console.log('このリンクは別タブで開きます');
}

data属性の存在チェック

JavaScript

const box = document.querySelector('.box');

if (box.hasAttribute('data-user-id')) {
    console.log('ユーザーIDが設定されています');
}

CSSの状態と組み合わせる場合

JavaScript

const input = document.querySelector('input');

if (!input.hasAttribute('required')) {
    input.setAttribute('required', '');
}

似た機能との違い

getAttribute()
値を取得する（なければ null）
hasAttribute()
存在の有無だけを true / false で判定

「値が何か」よりも「付いているかどうか」だけ知りたい時は、hasAttribute() のほうが直感的で安全です。

注意しておきたいポイント