[jQuery] jQuery の data() メソッドと attr() メソッドの違い
data-xxxxx属性（独自データ属性）まわり。
Contents
data メソッドの振る舞い
jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider より。
- dataメソッドとは、現在の要素に対して任意のデータ（本稿では、便宜上、内部データと呼びます）を設定／取得するためのメソッドです。
- dataメソッドは、あくまでjQuery内部で要素とデータのひも付けを管理するものだからです。
- もっと言うと、 dataメソッドは取得時に指定されたキーで内部データが見つからなかった場合にだけ、data-xxxxx属性を参照します。
故に下記のサンプル（#data1, #data2）のように data() メソッドと attr() メソッドで振る舞いに違いが出る。
See the Pen jQuery data() vs attr() 1/2 by DriftwoodJP (@DriftwoodJP) on CodePen.
このあたりが分かりづらいのは jQuery の data() メソッドが作られた後に、HTML の data-xxx 属性が作られたという歴史的経緯があるそう。
data メソッドは値をキャッシュする
jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider より。
- dataメソッドが独自データ属性の値を見にいくのは、あくまで内部データとして管理されているキーがまだ存在しない場合だけです。
故に上述のサンプル（#data3）のように、attr() メソッドで書き換えた独自データ属性（data-xxx）を data() メソッドで取得しても値は変わっていない。
キャッシュされた値を持ったままとなる。
再設定が必要な場合の手段
上述のような点に留意しないとはまる。
下記のような手段が必要になる。
- .data() / .attr() の2段階で扱う
- ネイティブJSで扱う
- HTMLElement.dataset（但し IE11 以上）
- element.getAttribute / element.setAttribute
参考。
data メソッドはデータ型を認識する
jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider より。
- dataメソッド で取得した値を$.typeメソッドで判定してみると、 文字列／数字だけでなく、配列／オブジェクトも正しく認識している 点に注目です。
- attrメソッドは全ての属性を文字列として扱います。
独自データ属性として数値／文字列／配列／オブジェクトなどを指定した例。
See the Pen jQuery data() vs attr() 2/2 by DriftwoodJP (@DriftwoodJP) on CodePen.
補遺
翔泳社
売り上げランキング: 126,405
.data() | jQuery API Documentation
.attr() | jQuery API Documentation