[jQuery] jQuery の data() メソッドと attr() メソッドの違い
data-xxxxx属性（独自データ属性）まわり。
[markdown]
> * [jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider](http://www.buildinsider.net/web/jqueryref/030)
## data メソッドの振る舞い
> [jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider](http://www.buildinsider.net/web/jqueryref/030) より。
>
> – 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 属性が作られたという歴史的経緯があるそう。
> * [[jQuery] data属性を動的に変更する場合の注意点 – Qiita](http://qiita.com/toshiharu-irie/items/e7f803085000c4008f51)
## data メソッドは値をキャッシュする
> [jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider](http://www.buildinsider.net/web/jqueryref/030) より。
>
> – __dataメソッドが独自データ属性の値を見にいくのは、あくまで内部データとして管理されているキーがまだ存在しない場合だけです。__
故に上述のサンプル（#data3）のように、`attr()` メソッドで書き換えた独自データ属性（data-xxx）を `data()` メソッドで取得しても値は変わっていない。
キャッシュされた値を持ったままとなる。
### 再設定が必要な場合の手段
上述のような点に留意しないとはまる。
下記のような手段が必要になる。
– [.data()](http://api.jquery.com/data/) / [.attr()](http://api.jquery.com/attr/) の2段階で扱う
– ネイティブJSで扱う
– [HTMLElement.dataset](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/dataset)（但し IE11 以上）
– [element.getAttribute](https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute) / [element.setAttribute](https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute)
参考。
> * [jQueryのdata-*属性キャッシュ仕様と対策](https://w3g.jp/blog/jquery-data-attr-cache)
> * [HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 – ROCHAS](http://dresscording.com/blog/html5/custom_data_attribute.html)
## data メソッドはデータ型を認識する
> [jQuery： 特定の要素に関連付くデータを取得／設定するには？（data） – Build Insider](http://www.buildinsider.net/web/jqueryref/030) より。
>
> – __dataメソッド__ で取得した値を$.typeメソッドで判定してみると、 __文字列／数字だけでなく、配列／オブジェクトも正しく認識している__ 点に注目です。
> – __attrメソッドは全ての属性を文字列として扱います。__
独自データ属性として数値／文字列／配列／オブジェクトなどを指定した例。
See the Pen jQuery data() vs attr() 2/2 by DriftwoodJP (@DriftwoodJP) on CodePen.
## 補遺
翔泳社
売り上げランキング: 126,405
> [.data() | jQuery API Documentation](https://api.jquery.com/data/)
> [.attr() | jQuery API Documentation](http://api.jquery.com/attr/)
[/markdown]