データセット属性について

javascript

データセット属性について

データセット属性について試してみます。

データセット属性は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>

サーバ上のHTMLはこちら(test1.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">
let test1 = document.getElementById("p1");
test1.dataset.testdata1 = "ddd";
</script>

</body>
</html>

サーバ上のHTMLはこちら(test2.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構造として使用し、見た目には影響を及ぼさない
・属性名にハイフンが含まれる場合は、アクセス時(マップ時)にキャメルケースを使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です