HTML5新特性 - 走看看

新增的元素选择方法

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>

HTML5延迟加载JS

defer：onload触发之前才加载该js文件，只能对外部js文件生效，多个defer共存时加载顺序不能确定。

async：异步加载js文件，顺序很难保证，用来加载独立的js。

labjs库：动态并行加载脚本文件并管理加载脚本文件的执行顺序。

history历史管理

触发历史管理：

　　1、页面跳转

　　2、改变hash

　　3、pushState

hash值改变事件：

　　window.onhashchange = function(){};

pushstate的使用：

　　必须在服务器上运行。

　　history.pushstate(数据，标题，地址)

　　window.onpopstate = function( ev ){ console.log(ev.state) }