ES5 & document事件

最新推荐文章于 2023-05-04 09:16:31 发布

零碎゛記忆。

最新推荐文章于 2023-05-04 09:16:31 发布

阅读量252

点赞数

分类专栏：原生JavaScript

本文链接：https://blog.csdn.net/qq_42827425/article/details/88567187

版权

原生JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

DOM文档加载的步骤为

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

document事件

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

readyState 页面的准备阶段的状态

interactive DOM树构建完成
complete 页面加载完成，相当于window.onload

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

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

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

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

三、ES5的严格模式

除了正常模式，ES5添加了第二种运行模式：“严格模式(use strict)”。顾名思义，这种模式使得javascript在更严格的条件下运行(更可靠，更安全)。目前，除了IE6-9，其它浏器均已支持ES5严格模式。
为什么要使用严格模式
(1) 消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；
(2) 消除代码运行的一些不安全之处，保证代码运行的安全；
(3) 提高编译器效率，增加运行速度；
(4) 为未来新版本的javascript做好铺垫；
如何使用
(1) 在头部写入 “use strict”

全局：针对整个js文件

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

局部：针对单个函数

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

执行限制
(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 类数组，包含了所有类名

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

dataset

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

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