HTML5新特性

浏览数：25 / 时间：2015年06月09日

新增的元素选择方法

1、querySelector：参数是一个css选择器；返回符合选择器的第一个dom元素，没有就返回null。IE8+

1 <div id="div1" class="div">div1</div>
2 <div id="div2" class="div">div2</div>
3 <div id="div3" class="div">div3</div>
4 <script>
5     // var oDiv1 = document.querySelector(‘#div1‘);
6     // var oDiv1 = document.querySelector(‘div‘);
7     var oDiv1 = document.querySelector(‘.div‘);
8 
9     oDiv1.style.background = ‘red‘;

2、querySelectorAll：参数是一个css选择器；返回符合选择器的dom集合，没有就返回空集合。IE8+

3、getElementsByClassName：通过类名获取元素集合。IE9+

classList

classList：元素的类的集合。

classList的相关属性和方法：

　　length：长度

　　add：添加相应的class

　　remove：删除相应的class

　　toggle：切换class，存在就删除，不存在就添加

　　item：根据索引访问类名

　　contains：判断是否包含相应的class

JSON实现对象深度或浅度拷贝

1     var oA = { name: ‘hum‘},
2             oB = {},
3             str = ‘‘;
4 
5     str = JSON.stringify(oA);
6     oB = JSON.parse(str);
7     console.log(oB.name); // hum
8     oB.name = ‘tyx‘;
9     console.log(oA.name); // hum

data自定义数据

简单使用：

1 <div id="div" data-name="hum" data-real-name="tyx">div</div>
2 <script>
3     var oDiv = document.querySelector(‘#div‘);
4     console.log(oDiv.dataset.name); // hum
5     console.log(oDiv.dataset.realName); // tyx
6 </script>