页面元素
<body><div></div><div></div><div></div><div></div></body>
onload和DOMContentLoaded对于DOM事件加载的区别
onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调
window.onload = function (ev) {var res = document.querySelectorAll("div");console.log(res);console.log("onload");}
document.addEventListener("DOMContentLoaded", function () {var res = document.querySelectorAll("div");console.log(res);console.log("DOMContentLoaded");});
使用attachEvent()
使用IE8进行
document.readyState属性有如下的状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成
onreadystatechange事件就是专门用于监听document.readyState属性的改变的
document.attachEvent("onreadystatechange", function () {if(document.readyState == "complete"){console.log("onreadystatechange");});
document.readyState
一个document的Document.readyState属性描述了文档的加载状态。
当该属性值发生变化时，会在document对象上触发readystatechange事件。
值
一个文档的readyState可以是以下之一：
loading / 正在加载
document仍在加载。
interactive / 可交互
文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete /完成
文档和所有子资源已完成加载。表示 load状态的事件即将被触发。
当这个属性的值变化时，document对象上的 readystatechange事件将被触发。
语法
let string = document.readyState;// "complete"
例子
不同的准备状态
switch (document.readyState) {case "loading":// 表示文档还在加载中，即处于“正在加载”状态。break;case "interactive":// 文档已经结束了“正在加载”状态，DOM元素可以被访问。// 但是像图像，样式表和框架等资源依然还在加载。var span = document.createElement("span");span.textContent = "A <span> element.";document.body.appendChild(span);break;case "complete":// 页面所有内容都已被完全加载.let CSS_rule = document.styleSheets[0].cssRules[0].cssText;console.log(`The first CSS rule is: ${CSS_rule }`);break;}
// 模拟 DOMContentLoaded/ jquery readydocument.onreadystatechange = function () {if (document.readyState === "interactive") {initApplication();}}
// 模拟 load 事件document.onreadystatechange = function () {if (document.readyState === "complete") {initApplication();}}
资料来源：document.readyState
