怎样确保页面中的js代码一定是在DOM结构生成之后再调用
2024-09-01 21:58:27
有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错:
<head>
<script>
console.log(document.body.nodeName);
</script>
</head>
<body>
</body>
上图所示的代码表明, 如果js代码在页面DOM没有解析出来时, document无法获取body元素, 这样就会造成报错. 解决方法有下面两种:
1. 将操作dom的代码放到body标签底部:
<!DOCTYPE html>
<html lang="en"> <head>
</head> <body>
<script>
console.log(document.body.nodeName);
</script>
</body> </html>
2. 使用 DOMContentLoaded 事件, 监听dom解析完成:
<!DOCTYPE html>
<html lang="en"> <head>
<script>
document.addEventListener("DOMContentLoaded", function () {
console.log(document.body.nodeName);
})
</script>
</head> <body>
</body> </html>
3. 使用script标签的defer属性和async属性
参考这篇博客: https://www.cnblogs.com/aisowe/p/11698983.html
最新文章
- HOJ 1001: A+B; 1002: A+B+C
- Oracle 11g系列:数据库
- hibernate-criteria查询
- Docker内部存储结构(devicemapper)解析(续)
- SQL 查询学生缺考情况
- 2016年10月23日 星期日 --出埃及记 Exodus 19:7
- Object的toString决定了重写equals
- Android WebView Long Press长按保存图片到手机
- struts2标签学习笔记(一)
- css如何实现背景透明,文字不透明?
- jqueryMobile中select样式自定义
- apache rewrite rule
- LKD3
- 基于visual Studio2013解决C语言竞赛题之0902文件查找
- php添加扩展插件
- JavaScript(7)——事件2.0
- 【JAVASCRIPT】React 学习 - 登录实战
- 浮动和BFC的学习整理转述
- 深入了解Java虚拟机和内存管理
- 019、使用公共Registry (2019-01-10 周四)
热门文章
- jquery判断一个标签是否包含另外一个标签
- legend3---阿里云服务器配置多个网站项目
- OpenJudge计算概论-大象喝水
- Request模块入门学习
- django 2 ORM操作 ORM进阶 cookie和session 中间件
- keras Dense 层
- Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)
- 123457123457#0#-----com.cym.YuErBaiKe02--前拼后广--育儿百科
- centOS 8 安装Hadoop
- Java-WebSocket调用报错:WebSocketClient objects are not reuseable