H5新增API

摘要：新增选择器和，参数都是选择器，前者返回符合条件的第一个匹配的元素，如果没有则返回，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。它返回一个对象，可以通过的形式新增或修改。

querySelector()和querySelectorAll()，参数都是css选择器，前者返回符合条件的第一个匹配的元素，如果没有则返回Null，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。

getElementsByClassName()返回一个类似数组的对象，包含了所有指定 class 名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点，也可以在任意元素上调用。

document.querySelector("div");     //选择第一个div
document.body.querySelector("p")[0];   //body下第一个p标签

document.getElementsByClassName("red test");
//获取所有 class 同时包括 "red" 和 "test" 的元素

length: 返回class数量。

add(class1, class2, ...):将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

contains(class):表示列表中是否存在给定的value值，如果存在则返回true，不存在则返回false。

remove(class1, class2, ...):移除元素中一个或多个类名，移除不存在的类名不会报错。

item(index):返回指定索引值的类名，index为数字(从0开始)，索引不在范围内返回null，不为数字会被转成数字类型再取整数部分，若转换失败返回第一个类名。

toggle(value,true || false):将值为value的class在添加和移除之间切换。

classList 属性返回的是一个 DOMTokenList 对象。此属性不兼容IE10以下版本。

Object.prototype.toString.call(node.classList);   
//"[object DOMTokenList]"

相对应 className 属性，可以设置或返回元素的 class 。返回的是字符串类型，设置会把原来的 class 值完全覆盖。语法：node.className = className。

let oDiv = document.querySelector("div");
console.log(oDiv.className);   //"wrap box"
oDiv.className = "class1";
console.log(oDiv.className);   //"class1"

新的HTML5标准允许在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由js动态修改，也支持CSS选择器。

用getAttribute、setAttribute存取dataset。