JavaScriptにおけるカスタム属性
HTMLでは、タグに独自のカスタム属性を追加することが許可されています。そのような属性は、<data-<で始まり、その後には任意の便利な属性名が続く必要があります。
カスタム属性は非常に多くの様々な方法で利用することができます。これらの方法の多くは、チュートリアルの中で後ほど学びます。そしてさらに多くの方法を、あなた自身で後々見つけ出すことができるでしょう。
そのような属性へのアクセスは標準的ではありません。以前のように、要素の同名のプロパティに単純にアクセスすることはできず、特別なプロパティ<dataset<を使用する必要があります。その後にピリオドを置き、<data-<を除いた属性名を記述します。例えば、属性が<data-test<と呼ばれる場合、それにアクセスするには<elem.dataset.test<と記述します。ここで<elem<は対象の要素を持つ変数です。
例を見てみましょう。以下のような要素があるとします:
<div id="elem" data-num="1000"></div>
その属性<data-num<の値を画面に表示してみましょう:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 を表示します
次に、この属性に別の値を代入しましょう:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
以下のコードが与えられています:
<div id="elem" data-text="str">text</div>
divがクリックされたときに、そのテキストの末尾に属性<data-text<の内容が追加されるようにしてください。
属性<data-num<に自身の順序番号を持つdivが複数与えられています:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
どのdivがクリックされても、その末尾に自身の順序番号が書き込まれるようにしてください。
ボタンが与えられています。このボタンが自身へのクリック回数をカウントし、何らかのカスタム属性に記録するようにしてください。別のボタンをクリックしたときに、最初のボタンに対して何回クリックが行われたかを画面に表示させてください。
入力欄が与えられています:
<input id="elem" data-length="5">
この入力欄では、属性<data-length<に入力する必要がある文字数が含まれています。フォーカスが外れたとき、入力された文字数が指定された数と一致しない場合、その旨のメッセージが表示されるようにしてください。
入力欄が与えられています:
<input id="elem" data-min="5" data-max="10">
この入力欄では、属性<data-min<と<data-max<に範囲が含まれています。フォーカスが外れたとき、入力された文字数がこの範囲に収まらない場合、その旨のメッセージが表示されるようにしてください。
