16、ES5

支持ES5的浏览器

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”放在函数体的第一行

function strict(){
    "use strict";
    return "这是严格模式";
}

2、为什么要用严格模式

• 消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；

• 消除代码运行的一些不安全之处，保证代码运行的安全；

• 提高编译器效率，增加运行速度；

• 为未来新版本的javascript做好铺垫；

三、获取元素节点

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)获取
dataset.age;//获取data-age的属性值
dataset.firstName;//获取data-first-name的属性值
(2)设置
dataset.gender="girl"；//设置data自定义属性，在html结构会多出[data-gender="girl"]