如何在DOM元素加载完毕后执行js代码以及DOM加载过程

原文：https://www.jianshu.com/p/ad86b686e9ac

最近在写一个动态菜单。即，根据用户角色权限生成菜单选项。动态菜单采用js进行html代码拼接，再append到相应的节点。但是存在一个问题，就是菜单功能的js代码会在DOM元素加载完成之前执行，也就是菜单生成之前执行，所以所有绑定的菜单点击事件都不能执行。

认识DOM和DOM加载过程以及如何让DOM加载完成后再执行js脚本文件

<b>DOM加载过程：</b>
网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤：
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造HTML DOM模型
5.加载图片等外部文件
6.页面加载完毕

从以上顺序可以看出，js等脚本会在DOM文档构造之前执行，这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中，这样能确保文档加载完毕后再执行脚本。所以我们一般这样写：
window.onload = function(){//执行脚本}
window.onload表示页面加载完了后（包括dom和js）

 

window.onload = function(){//执行脚本}

这样的话，这段js代码将会在DOM元素加载完毕之后进行菜单点击事件的绑定。

这个问题调试了很久很久，最后一行代码就解决了。233...
代码真是需要多写，多累积经验。感触太深了。QAQ

window.onload大法好啊！

6-1

谈谈document.ready和window.onload的区别

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

原文地址：谈谈document.ready和window.onload的区别