dataメソッドの使い方

Tag:

jQueryのdataメソッドを利用すると、任意のDOM要素に何らかのデータを紐付けることができます。ここでは、基本的な使い方についてとりあげます。

データの設定と取得

次のDOM要素に対してデータの設定と取得を行ってみます。

<div id="datatest"></div>

データを設定するには、dataメソッドの引数に「キー」と「設定する値」を指定します。データを取得するには、キーを指定します。

$("#datatest").data("id", "abcd");
$("#datatest").data("pass", "efgh");
console.log($("#datatest").data("id"));    // abcd
console.log($("#datatest").data("pass"));  // efgh

次のように複数のデータをまとめて設定することもできます。

var obj = {
    id: "abcd",
    pass: "efgh"
};
$("#datatest").data(obj);
console.log($("#datatest").data());  // [object Object]{id: "abcd", pass: "efgh"}

独自データ属性の値を取得

dataメソッドを利用して、独自データ属性の値を取得することができます。

※独自データ属性とは?
HTML5で追加された「data-XXXX」といった形の属性です。XXXXの部分には、好きな名称を自由につけることができます。

次のように、data-numberという独自データ属性が設定されているとします。

<div id="datatest" data-number="1234"></div>

data-number属性の値を取得するには、次のようにします。

console.log($("#datatest").data("number"));  // 1234

dataメソッドとattrメソッドの違い

属性値の取得は、attrメソッドでも可能です。しかし、dataメソッドとは違う点もあるので注意が必要です。

次のコードで動きを確認してみます。

// dataメソッドで属性値を取得
console.log($("#datatest").data("number"));           // 1234
console.log($.type($("#datatest").data("number")));   // number

// attrメソッドで属性値を取得
console.log($("#datatest").attr("data-number"));          // 1234
console.log($.type($("#datatest").attr("data-number")));  // string

// attrメソッドで属性値を変更
$("#datatest").attr("data-number", "1111");

// 再度取得
console.log($("#datatest").data("number"));           // 1234
console.log($("#datatest").attr("data-number"));      // 1111

まず、dataメソッドで取得すると値の型を自動的に設定してくれます。対して、attrメソッドでは、文字列として取得しています。

次に、attrメソッドで属性値を変更後、再度データを取得してますが、dataメソッドで取得された値は「1234」のままです。これは、dataメソッドでは、値取得時にキャッシュを見に行くのですが、前回取得時に作ったキャッシュがあるので「1234」のままになっています。

スポンサーリンク