HTML5新特性

新增的元素选择方法

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

<div id="div1" class="div">div1</div>
<div id="div2" class="div">div2</div>
<div id="div3" class="div">div3</div>
<script>
    // var oDiv1 = document.querySelector('#div1');
    // var oDiv1 = document.querySelector('div');
    var oDiv1 = document.querySelector('.div');

    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实现对象深度或浅度拷贝

    var oA = { name: 'hum'},
            oB = {},
            str = '';

    str = JSON.stringify(oA);
    oB = JSON.parse(str);
    console.log(oB.name); // hum
    oB.name = 'tyx';
    console.log(oA.name); // hum

data自定义数据

简单使用：

<div id="div" data-name="hum" data-real-name="tyx">div</div>
<script>
    var oDiv = document.querySelector('#div');
    console.log(oDiv.dataset.name); // hum
    console.log(oDiv.dataset.realName); // tyx
</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) }