JavaScript の hasAttribute() メソッド

概要: このチュートリアルでは、JavaScript のhasAttribute() を使用して、要素が属性を持っているかどうかを確認する方法を学習します。

JavaScript hasAttribute() メソッドの紹介

属性は、HTML 要素の動作を制御する HTML 要素の修飾子です。

属性は通常、HTML 要素の開始タグ内に指定された名前と値のペアで構成されます。

一般的に、HTML はid、class、styleなど、いくつかの一般的な標準属性を持つことができます。例:

<div id="message" class="info">HTML attribute</div>Code language: HTML, XML (xml)

要素が指定された属性を持っているかどうかを確認するには、hasAttribute() メソッドを使用します。

let result = element.hasAttribute(name);Code language: JavaScript (javascript)

この構文では

name は、要素内で確認したい属性名を指定します。

hasAttribute() は、要素が指定された属性を含む場合はtrueを、そうでない場合はfalseを返します。

JavaScript hasAttribute() メソッドの例

次の例は、<button> 要素がdisabled属性を持っているかどうかを確認するためにhasAttribute() メソッドを使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS hasAttribute() Demo</title>
</head>
<body>

    <button id="btnSend" disabled>Send</button>

    <script>
        let btn = document.querySelector('#btnSend');
        if (btn) {
            let disabled = btn.hasAttribute('disabled');
            console.log(disabled);
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

出力

trueCode language: JavaScript (javascript)

動作の仕組み

querySelector() メソッドを使用して、id がbtnSend のボタンを選択します。
<button> 要素でhasAttribute() メソッドを呼び出すことで、ボタンがdisabled属性を持っているかどうかを確認します。

まとめ

hasAttribute() メソッドを使用して、要素が指定された属性を含むかどうかを確認します。

クイズ

このチュートリアルは役に立ちましたか？