HTML5新特性的浏览器支持情况
JSON的新方法
新的选择器
querySelector：返回指定元素节点的子树中匹配选择器的集合中的第一个元素，如果没有匹配返回null。
querySelectorAll：按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合。
getElementsByClassName：取得DOM中class的集合。
获取class列表属性
classList 可以参考http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/
- length 属性，表示元素类名的个数，只读
- item() 支持一个参数，为类名的索引，返回对应的类名。例如：
<pre name="code" class="html" style="text-align: justify;">window.onload = function(){
var oDiv = document.getElementById('div1');
console.log(oDiv.classList.item(0)); // box1<pre name="code" class="html"> console.log<span style="font-family: Arial, Helvetica, sans-serif;">( oDiv.classList.length ); //3</span><body class="a b c">
<div id="div1" class="box1 box2 box3">aaaa</div>
<div id="div2" class="box4 box5 box6">aaaa</div>
</body>- add() 支持一个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。
<pre name="code" class="html">oDiv.classList.add('box3');
不论是否添加成功，此函数方法执行的返回值是
undefined, 因此，classList的add()方法是无法级联的。下面的remove()方法也是如此。
- remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。例如：
oDiv.classList.remove('box3');
有点对应于jQuery中的
removeClass()方法，然后者返回包装器对象本身，可级联；这里的remove()方法返回undefined，不可级联。- toggle() 支持一个类名字符串参数。无则加勉，有则移除之意。若类名列表中有此类名，移除之，并返回
false; 如果没有，则添加该类名，并返回true.
部分现代浏览器，例如Chrome浏览器以及Firefox 24的
toggle()方法已经支持第2个参数，.toggle(token, switch). 其中参数switch为Boolean类型值，如果为true表示添加，如果为false则表示移除。并返回该Boolean值。- contains() 支持一个类名字符串参数。表示往类名列表中是否包含该类名。有点对应jQuery中的
hasClass方法，注意，这里的是contains而不是contain，后面有个s哦！返回值很易懂的。如果包含，则返回
true, 不包含，则false. 例如：
<pre code_snippet_id="474547" snippet_file_name="blog_20140924_5_537188" name="code" class="html" style="text-align: justify;">oDiv<span style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif;">.classList.contains("box3"); // false 因为"box3"上面remove掉了</span>
parse() : 把字符串转成json
字符串中的属性要严格的加上引号stringify() : 把json转化成字符串会自动的把双引号加上新方法与eval的区别:
eval()：函数可计算某个字符串，并执行其中的的 JavaScript 代码。
JSON.parse() 可以解析json格式的数据，并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，
而eval()则可以解析任何字符串，eval是不安全的。
新方法的应用——深度克隆新对象
详细解析：
例子1：
var a = {name : '小明'};
var b = a; //直接将a赋值b
b.name = '小强';
alert( a.name ); // 小强
例子2：
var a = {name : '小明'};
var b = {};
for(var attr in a){
<span style="white-space:pre"> </span>b[attr] = a[attr]; // 属性拷贝方式
}
b.name = '小强';
alert( a.name ); // 小明
但是如果json的数据是数组的话怎么办呢？像下面的这个例子：
例子3：
var a = {name : ['a','b']};
var b = {};
for(var attr in a){
b[attr] = a[attr];
}
b.name.push('c');
alert( a.name ); // a,b,c
解决方法，就用到上面提到的新的方法：
例子4：
var a = {name : ['a','b']};
var str = JSON.stringify(a);
console.log(str); // {"name":["a","b"]} 标准格式，带引号
var b = JSON.parse(str);
b.name.push('c');
alert( a.name ); // a,b
如何其他浏览器做到兼容
http://www.json.org/去下载json2.js
http://www.json.org/去下载json2.js
data自定义数据
设置自定义data值：
<span style="font-size:18px;"><div id="div1" data-miaov="小明" data-miaov-all="小强">aaaaaa</div></span>
window.onload = function(){
var oDiv = document.getElementById('div1');
//alert( oDiv.dataset.miaov );
alert( oDiv.dataset.miaovAll );
}; 设置是格式为：data-name-first，对应获取时为：dataset.nameFirst；将连字符去掉，并用驼峰式命名。
如果想删除某个自定义属性，可以用 delete oDiv.dataset.miaov ，此方法反映在DOM结构上就是没有了data-miaov这个属性；也可以用 oDiv.dataset.miaov = null;反映到DOM结构中就是 data-miaov = "null"。
传统方式：我们用attribute方法来获取和设置 data-* 自定义属性
扫一扫
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
