HTMLの要素の属性の役割や種類、取得【現役エンジニアが解説】

PROGRAM

今回は、HTMLの要素の属性の役割や種類、取得について、それぞれに分け、簡単に解説していきます。

属性の役割

属性は、各要素(タグ)に設定するオプションのことです。

属性はタグ内に設定するものであり、属性名=”属性値”の形式で設定します。

<input type="text">

上記のコードでは、input要素のtype属性の値をtextとし、テキストボックスを表示しています。

属性の種類

idやname、classといった属性は外から特定するための属性です。

一方で、typeやvalue等の属性はその要素(タグ)のための設定であることが多いです。

<input type="text" id="hoge" name="hoge" class="hoge" data-hoge="hoge" value="hoge">

上記のコードでは、input要素に特定や設定のための属性に加え、data-hogeというカスタム属性を設定しています。

属性の取得

idやname、classといった属性によってJavaScriptからその要素の取得ができます。

また、それ以外の属性に関しては、要素を特定したうえであれば、値を取得することができます。

var hoge = document.getElementById("hoge");
console.log(hoge.getAttribute("data-hoge")); // "hoge"

上記のコードでは、先程のinput要素をJavaScriptからidによって特定したうえで、カスタム属性のdata-hogeの属性の値をログに出力しています。