HTMLElement.dataset - グローバル属性のdata-*属性

2017/10/03

datasetは、HTMLElementのプロパティです。HTMLのグローバル属性であるdata-*属性を反映します。値はDOMStringMapで扱われます。

概要

名前

dataset

所属

IDL

[SameObject] readonly attribute DOMStringMap dataset;

仕様書

https://html.spec.whatwg.org/multipage/dom.html#dom-dataset

説明

このプロパティはHTMLを反映しています。値についての説明はdata-*属性の項目をご参考下さい。

チュートリアル

このプロパティの値は、DOMStringMapで扱われます。

HTML

<p data-syncer-title="SYNCER" data-syncer-created-at="2014-06-10" id="hoge">SYNCER</p>

JavaScript

// HTMLElementを取得
var element = document.getElementById( "hoge" ) ;

// DOMStringMapを取得
var domStringMap = element.dataset ;

取得

var value1 = domStringMap.syncerTitle ;	// "SYNCER"
var value2 = domStringMap.syncerCreatedAt ;	// "2014-06-10"

代入

domStringMap.syncerTitle = "arayutwのブログ" ;	// <p data-syncer-title="arayutwのブログ" data-syncer-created-at="2014-06-10" id="hoge">SYNCER</p>
domStringMap.syncerCreatedAt = "1999-12-31" ;	// <p data-syncer-title="arayutwのブログ" data-syncer-created-at="1999-12-31" id="hoge">SYNCER</p>

デモ

HTMLElement.datasetを取得するデモです。コメントアウト部分を外して、代入した場合も試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<!-- try it! -->
	<p data-syncer-title="SYNCER" data-syncer-created-at="2014-06-10" id="hoge">SYNCER</p>
<!-- try it! -->
<hr>
<div id="result"></div>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;
var domStringMap = element.dataset ;

// 代入
// domStringMap.syncerTitle = "arayutwのブログ" ;
// domStringMap.syncerCreatedAt = "1999-12-31" ;

// 取得
var value1 = domStringMap.syncerTitle ;
var value2 = domStringMap.syncerCreatedAt ;
/** try it! **/

var results = { value1:value1, value2:value2, } ;
var resultElement = document.getElementById( "result" ) ;

resultElement.appendChild( new Text( element.outerHTML + "\n\n" ) ) ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	resultElement.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>