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

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

最近在写一个动态菜单。即,根据用户角色权限生成菜单选项。动态菜单采用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)

img_f78bbe8216b1bb9be74eeaa356b1cd01.png
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的区别

目录
相关文章
|
18天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
23天前
|
存储 JavaScript 前端开发
理解DOM树的加载过程
理解DOM树的加载过程
16 0
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
23天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
26 0
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
9天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
9天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
11天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
11天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
15天前
|
JavaScript 前端开发