Opera 11.60+
Internet Explorer 9+ (IE9不支持严格模式)
Firefox 4+
Safari 5.1+
Chrome 13+
一、页面加载顺序及事件
（一）页面加载顺序
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、 解析并执行脚本代码。
4、DOM树构建完成。(获取元素) ==>DOMContentLoaded
5、加载图片等外部文件。
6、 页面加载完毕 ==> window.onload
（二）事件
1、onreadystatechange ==> 准备阶段改变时触发函数
（1.1）document.readyState ==> 准备阶段
* interactive ==> 等待dom树构建完成触发
* complete ==> 等待页面加载完毕触发
2、document.addEventListener("DOMContentLoaded",function(){}) ==> DOM树构建完成
* readystatechange事件（准备阶段状态改变，两个状态）
* interactive ：DOM树完成执行
* complete ：类似window.onload,但比window.onload先执行
* DOMContentLoaded事件
* DOM树完成执行
* 必须使用事件监听器绑定document事件
*
PS:以上事件用以取代window.onload事件（实际开发不常用）
二、如何使用ES5，严格模式（ie9及以下不支持）
1、在头部写入 “use strict”
-
全局：针对整个js文件将”use strict”放在js文件的第一行
-
局部：针对单个函数将”use strict”放在函数体的第一行
1 function strict(){ 2 "use strict"; 3 return "这是严格模式"; 4 }
2、为什么要用严格模式
-
消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；
-
消除代码运行的一些不安全之处，保证代码运行的安全；
-
提高编译器效率，增加运行速度；
-
为未来新版本的javascript做好铺垫；
扫描二维码关注公众号，回复： 5457725 查看本文章
三、获取元素节点
1、document.querySelector("css选择器写法 . #") 获取匹配选择器的第一个元素节点，返回DOM节点
2、document.querySelectorAll( "css选择器写法 . #")获取匹配选择器的所有元素，返回数组
四、Function方法（用在函数上的方法）
1、bind(指定对象)
用于将当前函数和指定对象绑定（改变函数内this指向为指定对象），返回一个新的函数 ==>（还没有执行）
五、classList 类数组，包含了所有类名(重点)
1、ele.classList.length : class类名的个数
2、ele.classList.add() : 添加class方法
3、ele.classList. remove() : 删除class方法
4、ele.classList.toggle() : 切换class方法
5、ele.classList.contains():是否含有某个类,返回布尔值
六.data自定义属性
（一）dataset 对象
1.符合W3C标准自定义属性：data-*
<div id="box" data-name="laoxie" data-age="18" data-first-name="xiexie"></div>
2.dataset：存放所有data自定义属性的对象。
1 (1)获取 2 dataset.age;//获取data-age的属性值 3 dataset.firstName;//获取data-first-name的属性值 4 (2)设置 5 dataset.gender="girl"；//设置data自定义属性，在html结构会多出[data-gender="girl"]