DOMStringMap - HTMLのカスタム属性の操作

2017/10/03

DOMStringMapは、HTML要素のdata-*属性を操作するための機能を備えたインターフェイスです。

概要

名前

DOMStringMap

IDL

[Exposed=Window,
 OverrideBuiltins]
interface DOMStringMap {
  getter DOMString (DOMString name);
  [CEReactions] setter void (DOMString name, DOMString value);
  [CEReactions] deleter void (DOMString name);
};

仕様書

https://html.spec.whatwg.org/multipage/dom.html#domstringmap

チュートリアル

DOMStringMapの取得

DOMStringMapは、要素のdata-*属性を操作します。次のように取得できます。

<div data-syncer="SYNCER" data-meta-category="travel" id="hoge">SYNCER</div>

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

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

DOMStringMapは、要素の各data-*属性をキーに持ちます。キー名は、属性名からdata-を取り除き、さらに、それ以降にハイフン(-)が含まれる場合は、ハイフンを削除し、直後の1文字を大文字に変換したものになります。先の例では、次のようになります。

属性名	キー名
data-syncer	syncer
data-meta-category	metaCategory

getter

各data-*属性の値を取得するには、DOMStringMapのプロパティを取得して下さい。

var value1 = element.dataset.syncer ;	// "SYNCER"
var value2 = element.dataset.metaCategory ;	// "travel"

seter

各data-*属性の値を更新するには、DOMStringMapのプロパティに代入して下さい。

element.dataset.syncer ;	// "arayutwのブログ"
element.dataset.metaCategory ;	// "web"

// <div data-syncer="arayutwのブログ" data-meta-category="web" id="hoge">SYNCER</div>

deleter

プロパティを削除すると、それに応じたdata-*属性が削除されます。

delete element.dataset.syncer ;	// <div data-meta-category="travel" id="hoge">SYNCER</div>
delete element.dataset.metaCategory ;	// <div id="hoge">SYNCER</div>

デモ

{{me}}を取得するデモです。コメントアウト部分を外して、代入や削除も試してみて下さい。

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

<!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" ) ;

// setter
// element.dataset.syncerTitle = "arayutwのブログ" ;
// element.dataset.syncerCreatedAt = "1999-12-31" ;

// getter
var value1 = element.dataset.syncerTitle ;
var value2 = element.dataset.syncerCreatedAt ;

// deleter
// delete element.dataset.syncerTitle ;
// delete element.dataset.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>

コンストラクタ

コンストラクタはありません。

プロパティ

固有のプロパティはありません。

メソッド

固有のメソッドはありません。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
●	● 6+	● 5.1+	●	● 11+	●	●	● 4.0+

概要

チュートリアル

DOMStringMapの取得

getter

seter

deleter

デモ

コンストラクタ

プロパティ

メソッド

定数

イベント

サポート状況

関連記事