データセット属性について
データセット属性について試してみます。
データセット属性はHTMLドキュメントに対して、標準外の属性を定義し、その定義した属性を
javascript側で取得し使用することができます。
実際にどんな挙動になるのか、以下かんたんなHTMLドキュメントのサンプルを書いて試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name" data-testdata1="aaa" data-testdata2="bbb" data-testdata3="ccc">p1text</div>
</div>
<script type="text/javascript">
// ID「p1」の要素を取得
let test1 = document.getElementById("p1");
// 取得した内容を確認
console.log("test1 -> " + test1);
// 取得したデータセット属性の値を確認
console.log("testdata1 -> " + test1.dataset.testdata1);
console.log("testdata2 -> " + test1.dataset.testdata2);
console.log("testdata3 -> " + test1.dataset.testdata3);
</script>
</body>
</html>
実行した結果は
test1 -> [object HTMLDivElement] testdata1 -> aaa testdata2 -> bbb testdata3 -> ccc
という結果になります。
HTMLドキュメントとして定義した
<div id="p1" name="p1name" data-testdata1="aaa" data-testdata2="bbb" data-testdata3="ccc">p1text</div>
という箇所の「data-testdata1=”aaa”」の部分がデータセット属性になります。
データセット属性を取得するときは
test1.dataset.testdata1
というように、「(取得した)DOMオブジェクト.dataset.定義名」という、データセットプロパティを使用し、値を取得します。
データセット属性に値をセットする
上記のサンプルではデータセット属性の値を取得しましたが、その反対に値をデータセット属性に対してセットすることもできます。
以下のサンプルで試してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name" data-testdata1="aaa" data-testdata2="bbb" data-testdata3="ccc">p1text</div>
</div>
<script type="text/javascript">
// hasAttributeで「name属性」の有無を取得
let test1 = document.getElementById("p1");
test1.dataset.testdata1 = "ddd";
</script>
</body>
</html>
上記の画面にアクセスすると、データセット属性に値を代入された後のHTMLドキュメントになっていることがわかります。
具体的には、以下のHTMLソースになっていることを確認しました。(ブラウザの開発者ツールで確認)
<html lang="ja"><head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name" data-testdata1="ddd" data-testdata2="bbb" data-testdata3="ccc">p1text</div>
</div>
<script type="text/javascript">
// ID「p1」の要素を取得
let test1 = document.getElementById("p1");
// データセット属性のtestdata1に対して値を代入
test1.dataset.testdata1 = "ddd";
</script>
</body>
</html>
javascript実行前は「data-testdata1=”aaa”」でしたが、実行後に「data-testdata1=”ddd”」という値に書き変わっています。
データセット属性の注意点
データセット属性についての注意点をまとめます。
・属性名は小文字で記述する必要あり
・HTMLのDOM構造として使用し、見た目には影響を及ぼさない
・属性名にハイフンが含まれる場合は、アクセス時(マップ時)にキャメルケースを使用する