HTMLの要素の属性の役割や種類、取得【現役エンジニアが解説】
今回は、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の属性の値をログに出力しています。