自定义新属性 data-*

目录：

1.引子 : attribute和property的区别详解

2.解决方案：data-* / dataset 和 attribute的关系

3.自定义属性 data-* 和 jQuery.data 详解

- 利用 getAttribute、setAttribute 存取 dataset

- 利用 dataset API 存取 dataset

- 利用 jQuery.attr 方法存取 dataset

- 利用 jQuery.data 方法存取 dataset

- jQuery.data 解析 Dataset 的 JSON 信息

- CSS、jQuery 查找 data 属性对应元素

引子 : attribute和property的区别详解

attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了.

attribute。

attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap，总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

<div class="box" id="box" gameid="880">hello</div>

上面的div元素的HTML代码中有class、id还有自定义的gameid，这些特性都存放在attributes中，类似下面的形式：

[ class="box", id="box", gameid="880" ]

可以这样来访问attribute节点：

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

但是IE6-7将很多东西都存放在attributes中，上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法：

console.log( elem.getAttribute('gameid') ); // 880

要设置一个attribute节点使用setAttribute方法，要删除就用removeAttribute：

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

attributes是会随着添加或删除attribute节点动态更新的。

property

property就是一个属性，如果把DOM元素看成是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。
要添加和删除property也简单多了，和普通的对象没啥分别：

elem.gameid = 880; // 添加
console.log( elem.gameid ) // 获取
delete elem.gameid // 删除

attribute和property混倄的原因

1.很多attribute节点还有一个相对应的property属性，比如上面的div元素的id和class既是attribute，也有对应的property，不管使用哪种方法都可以访问和修改。

console.log( elem.getAttribute('id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ); // hello

2.但是对于自定义的attribute节点，或者自定义property，两者就没有关系了。

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // undefined
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

对于IE6-7来说，没有区分attribute和property：

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

3.DOM元素一些默认常见的attribute节点都有与之对应的property属性，比较特殊的是一些值为Boolean类型的property.
如一些表单元素：

<input type="radio" checked="checked" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

对于这些特殊的attribute节点，只有存在该节点，对应的property的值就为true
如：

<input type="radio" checked="anything" id="raido">
var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

总结

attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。

// gameid和id都是attribute节点
// id同时又可以通过property来访问和修改
<div gameid="880" id="box">hello</div> 
// areaid仅仅是property
elem.areaid = 900;

解决方案：data-* / dataset 和 attribute的关系

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-的方式来自定义属性，所谓data-实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

读写方式
data-*有两种设置方式，可以直接在HTML元素标签上书写

<div id="test" data-age="24">
   Click Here
</div>

其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合

var test = document.getElementById('test');
test.dataset.my = 'Byron';

这样就为div添加了一个data-my的自定义属性，使用JavaScript操作dataset有两个需要注意的地方

1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式。

2. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

为刚才代码追加写内容

<style type="text/css"> [data-birth-date] { background-color: #0f0; width:100px; margin:20px; } </style>
test.dataset.birthDate = '19890615';

这样我们通过JavaScript设置了data-birth-date自定义属性，在CSS样式表为div添加了一些样式
读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名

var test = document.getElementById('test');
        test.dataset.my = 'Byron';
        test.dataset.birthDate = '19890615';
        test.onclick = function () {
        alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
        }

dataset 和 attribute的关系

var test = document.getElementById('test');
        test.dataset.birthDate = '19890615';
        test.setAttribute('age', 25);
        test.setAttribute('data-sex', 'male');

        console.log(test.getAttribute('data-age')); //24
        console.log(test.getAttribute('data-birth-date')); //19890516
        console.log(test.dataset.age); //24
        console.log(test.dataset.sex); //male

这样我们可以看出，两者都把属性设置到了attribute上（废话，要不人家能叫自定义属性），也就是说getAttribute/setAttribute可以操作所有的dataset内容，dataset内容只是attribute的一个子集，特殊就特殊在命名上了，但是dataset内只有带有data-前缀的属性（没有age=25那个）。一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便

浏览器兼容性

比较不好的消息就是data-*的浏览器兼容性情况十分不乐观
Internet Explorer 11+
Chrome 8+
Firefox 6.0+
Opera 11.10+
Safari 6+
其中IE11+简直就是亮瞎小伙伴的眼，看来要想全面使用此属性路漫漫其修远矣

自定义属性 data-* 和 jQuery.data 详解

.

1.利用 getAttribute、setAttribute 存取 dataset

作为HTML元素的标签，dataset的存取也服从getAttribute、setAttribute，而且这两个方法兼容性也最广。
例如对于上面的两个例子，我们可以运行

//get
var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album);
//set
document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

优点：
这样就可以以一种更兼容的方式，来存取dataset数据。所做出的任何更改，都是可以实时反映到元素data属性上的。
缺点：
但是这种方法比较低端，如果遇到多个data-*自定义字段，想要一次全部获取所有的data属性并包装成对象的话，还必须做一个循环，很麻烦。不过我们还有Dataset API可用。

2.利用 dataset API 存取 dataset

通过.dataset API，我们可以更方便的获取元素的所有data字段，并以对象的方式，方便存取和遍历。例如，对于上面的例子，可以运行

//get
var songd = document.getElementById("music-latch").dataset;
var album = songd.album;
console.log(album);
//set
document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck";
//add
document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";

这时候我们在访问data时，就不需要”data-“关键词了，直接利用.dataset.name就可以访问到。这比上面的方法更方便。所做出的任何更改，都是可以实时反映到元素data属性上的。
如果涉及到连字符”-“，可以采取驼峰化的方法来存取：

<span id="en" data-en-us="Peiking Duck"></span>

其中en-us要写成enUs：

var en = document.getElementById("en").dataset.enUs;

3.利用 jQuery.attr 方法存取 dataset

jQuery有着出色的兼容性。类似get、setAttribute，jQuery的.attr()方法同样可以用在这样的情况下，例如，对于上面的例子，可以运行

window.jQuery && (function($){
//get
var album = $("#music-latch").attr("data-album");
console.log(album);
//set
$("#food-pkd").attr("data-en","Beijing Stuffed Duck");
})(window.jQuery);

优点：
这与jQuery.attr运用在其他属性上时的情况完全一样，并且所做出的任何更改，都是可以实时反映到元素data属性上的。

4.利用 jQuery.data 方法存取 dataset

jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性，同时也不需要写”data-“关键词了，例如，对于上面的例子，可以运行

window.jQuery && (function($){
//get
var album = $("#music-latch").data("album");
console.log(album);
//set
$("#food-pkd").data("en","Beijing Stuffed Duck");
})(window.jQuery);

优点：
这样的方法也能出色的存取data属性
缺点：
但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。
也就是说，jQuery现在认为#food-pkd元素的data-en为”Beijing Stuffed Duck”，但是在HTML元素上，其值还是没有改变，仍为”Peking Duck”：

window.jQuery && (function($){
//set
$("#food-pkd").data("en","Beijing Stuffed Duck");
console.log( $("#food-pkd").data("en") );
// log: "Beijing Stuffed Duck"
})(window.jQuery);
console.log( document.getElementById("food-pkd").dataset.en );
// log: "Peking Duck"

jQuery.data 解析 Dataset 的 JSON 信息

事实上，jQuery还可以很聪明的从data里提取出json信息转换为对象：

<span id="song-jsn"
data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'>
Latch (feat. Sam Smith)
</span>
window.jQuery && (function($){
var jsn = $("#song-jsn").data("meta");
console.log( jsn.album );
// log: "Disclosure"
})(window.jQuery);

这样，你就可以不必写一堆 data-album、data-lyrics、data-artist了，你可以直接把所有歌曲信息全部写到JSON里放到一个单独的data标签里！

CSS、jQuery 查找 data 属性对应元素

如果我想要所有专辑名（data-album）为Disclosure的歌曲名显示为红色，在CSS选择器里，我们可以这样去匹配

.musique[data-album='Disclosure']
{ color:red; }

这样，上面的例子中的span文字就会显示为红色。
如果我想要所有的现在可订购的食物在点击后弹出对话窗，在jQuery里，也可以通过 中括号[] 用以下方式去轻松匹配

window.jQuery && (function($){
$(".food").filter("[data-available]").each(function(){
$(this).click(function(){
alert("It's Available!");
});
});
})(window.jQuery);