ES5

es3-es5(严格模式)

支持ES5的浏览器

Opera 11.60+

Internet Explorer 9+ (IE9不支持严格模式)

Firefox 4+

Safari 5.1+

Chrome 13+

页面加载事件

DOM文档加载的步骤为

1. 解析HTML结构。

2. 加载外部脚本和样式表文件。

3. 解析并执行脚本代码。

4. DOM树构建完成。//DOMContentLoaded

5. 加载图片等外部文件。

6. 页面加载完毕。//window.onload

   页面加载事件

* readystatechange事件（准备阶段状态改变，两个状态）
    * interactive 	：DOM树完成执行
    * complete		：类似window.onload,但比window.onload先执行
* DOMContentLoaded事件
	* DOM树完成执行
    * 必须使用事件监听器绑定document事件
* 
PS:以上事件用以取代window.onload事件（实际开发不常用）

演示：通过控制台打印查看执行顺序

document.onreadystatechange = function(){
    if(document.readyState === 'interactive'){
    	console.log(iteration);
	}
	if(document.readyState === 'complete'){
        console.log('complete');
	}
}
document.addEventListener("DOMContentLoaded",function(){
    console.log("DOMContentLoaded");
})
document.onload = function(){
    console.log("onload);
}

ES5的严格模式

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

为什么要用严格模式

• 消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；
• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的javascript做好铺垫；

举例子：

function sum(){
    a = 10;
  	//在普通模式下，若在函数内不使用var声明变量，会默认变成全局变量
  	//为了改变现状，出现ES4版本，然而变动太大，未被使用
  	//出现ES5作为过渡阶段，存在两种模式
}

如何使用ES5

在头部写入 “use strict”

• 全局：针对整个js文件
  将”use strict”放在js文件的第一行
• 局部：针对单个函数
  将”use strict”放在函数体的第一行

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

执行限制

• 不使用var声明变量严格模式中将不通过

• 删除系统内置的属性会报错

• 不能删除var声明的全局变量（会自动成为window的属性）

• 对象有重名的属性将报错

  • var obj={name:“小王”,name:‘王大锤’}

• 函数有重名的形参将报错

  • function sum(a,a,b){}

• arguments严格定义为参数（包含了实参的所有信息）

  • 不允许对arguments赋值
  • 禁止使用arguments.callee调用自己本身的函数

• 函数必须声明在顶层，不能写在条件判断语句或for循环语句中

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

获取元素节点

• querySelector(selector)
  获取匹配选择器的第一个元素节点，返回DOM节点
• querySelectorAll(selector)
  获取匹配选择器的所有元素，返回数组

对比用getElementsByClassName()等方法获取到的类数组，querySelectorAll()可以使用forEach()方法。

（学会查看控制台！！！）

Function方法

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

应用

var btns = document.querySelectorAll('.btn');
for(var i=0;i<btns.length;i++){
    btns[i].onclick = function(){
        //方式1(1)：var self = this;
        setTimeout(function(){
            //(2)console.log(self.innerHTML);
            //方式2.bind()改变this的指向
            console.log(this.innerHTML);
        }.bind(this),1000);
    };
}

操作class的属性

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

• length : class类名的个数
• add() : 添加class方法
• remove() : 删除class方法
• toggle() : 切换class方法
• 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"]

//回顾：操作任意自定义属性（可以是非标准的）
//setAttibutte（）
//getAttibute（）