deta属性の使い方、名前の付け方の注意点
deta属性の付け方
data属性を使用することで、HTML要素に任意のデータを格納できます。
以下は data属性を利用した例です。
<div data-user-id="123" data-user-name="John Smith" data-user-age="30">...</div>このように、 data属性名は "data-" から始まり、その後に任意の名前を指定します。属性値には、文字列や数値、真偽値などのJavaScriptのデータ型を入れることができます。
data属性名の注意点
data属性の名前には次の注意点があります。
- 属性名には、アルファベット、数字、ハイフン、アンダースコアを使用できます。
- 属性名は小文字で記述する必要があります。
- 属性名にスペースを含めることはできません。
- 属性名はハイフンで単語を区切ることが一般的です。ただし、JavaScriptで要素にアクセスする際には、キャメルケースを使用するのが一般的です。つまり、HTML上で
data-modal-titleという属性名を使う場合には、JavaScriptでdataset.modalTitleというように、キャメルケースでアクセスします。
data 属性の取得方法
data 属性には、 dataset プロパティを使ってアクセスできます。 dataset プロパティには、 data属性の名前をキーとし、その属性値を値とするオブジェクトが格納されます。
例えば、先ほどの data-user-id、 data-user-name、 data-user-age のような data属性を持つHTML要素がある場合、以下のように dataset プロパティを使ってアクセスすることができます。
const userElem = document.querySelector('[data-user-id="123"]');
console.log(userElem.dataset.userId); // "123"
console.log(userElem.dataset.userName); // "John Smith"
console.log(userElem.dataset.userAge); // "30"また、 dataset プロパティを使って data属性の値を変更することもできます。
userElem.dataset.userName = "Jane Doe";このように、 data属性を使うことで、HTML要素に任意のデータを格納し、JavaScriptで取り出して操作することができます。