ES5 & document事件

…支持ES5的浏览器：Opera11.60+，Internet Explorer9+ (IE9不支持严格模式)，Firefox4+，
Safari 5.1，Chrome13+

DOM文档加载的步骤为

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. DOM树构建完成 //DOMContentLoaded
5. 加载图片等外部文件
6. 页面加载完毕 //window.onload

document事件

1. onreadystatechange 当页面准备阶段改变时触发

• readyState 页面的准备阶段的状态
  
   interactive   DOM树构建完成
   complete     页面加载完成，相当于window.onload

2. DOMContentLoaded(只能使用事件监听器) 当DOM树构建完毕

备注：在DOM树构建完成获取元素节点的两种方法

//第一种方式
document.onreadystatechange = function(){
   if(document.readyState == "interactive"){
        //写代码
        console.log("interactive");
    }
}

//第二种方式
document.addEventListener("DOMContentLoaded", function(){
    console.log("DOMContentLoaded");
})

三、ES5的严格模式

1. 除了正常模式，ES5添加了第二种运行模式：“严格模式(use strict)”。顾名思义，这种模式使得javascript在更严格的条件下运行(更可靠，更安全)。目前，除了IE6-9，其它浏器均已支持ES5严格模式。

2. 为什么要使用严格模式
   (1) 消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；
   (2) 消除代码运行的一些不安全之处，保证代码运行的安全；
   (3) 提高编译器效率，增加运行速度；
   (4) 为未来新版本的javascript做好铺垫；

3. 如何使用
   (1) 在头部写入 “use strict”

全局：针对整个js文件

   将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行

局部：针对单个函数

   将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行。

4. 执行限制
   (1) 不使用var声明变量严格模式中不通过
   
   (2) 删除系统内置的属性会报错
   
   (3) delete不可删除属性的对象的时报错，如：
     var声明的全局变量（会自动称为window的属性）
   
   (4) 对象有重名的属性将报错
     var obj={name:“小王”,name:‘王大锤’}
   
   (5) 函数有重名的参数将报错
     function sum(a,a,b){}
   
   (6) arguments严格定义为参数
     不允许对arguments赋值
     禁止使用arguments.callee
   
   (7) 函数必须声明在顶层，不能写在条件判断语句或for循环语句中

var arr = [10,2,3,50];
if(arr.length>3){
    function sum(){//报错
    }
}

获取元素节点

(1) document.querySelector(“css选择器”)

• 获取匹配选择器的第一个元素节点，返回DOM节点

(2) document.querySelectorAll()

• 获取匹配选择器的所有元素，返回数组

Function方法

(1) bind(指定对象)

用于将当前函数和指定对象绑定(改变函数内this指向为指定对象)，返回一个新的函数

//例:  
var obj = {
    uname : "柠檬",
}
function show(){
    console.log(this.uname);
}
show.bind(obj)();

classList 类数组，包含了所有类名

1. length :    class类名的个数
2. add() :     添加class方法
3. remove() :   删除class方法
4. toggle() :    切换class方法
5. contains():  是否含有某个类,返回布尔值

dataset

1. 符合W3C标准自定义属性：data-* 例：data-love=“xuexi”
2. dataset 存放所有data自定义属性的对象

• 获取 ele.dataset.age; //获取data-age的属性值
• 设置 ele.dataset.age = “” //设置data-age的属性值