【JavaScript】50_DOM：文档的加载
【摘要】 8、文档的加载网页是自上向下加载的，如果将js代码编写到网页的上边， js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况 window.onload事件会在窗口中的内容加载完毕之后才触发 document的DOMContentLoaded事件会在当前文档加载完毕之后触发如何解决这个问题：将script标签编写到body的最后（ * ）将代码编写到window.onl...
8、文档的加载
网页是自上向下加载的，如果将js代码编写到网页的上边， js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况
window.onload
事件会在窗口中的内容加载完毕之后才触发
document的DOMContentLoaded
事件会在当前文档加载完毕之后触发
如何解决这个问题：
- 将script标签编写到body的最后（ * ）
- 将代码编写到window.onload的回调函数中
- 将代码编写到document对象的DOMContentLoaded的回调函数中（执行时机更早）
- 将代码编写到外部的js文件中，然后以defer的形式进行引入（执行时机更早，早于DOMContentLoaded）（ * ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.onload = function(){
// const btn = document.getElementById('btn')
// console.log(btn)
// }
// window.addEventListener('load',function(){
// const btn = document.getElementById('btn')
// alert(btn)
// })//先加载页面，再显示弹窗
// document.addEventListener('DOMContentLoaded',function(){
// const btn = document.getElementById('btn')
// alert(btn)
// })//先弹窗，再加载页面
</script>
</head>
<body>
<button id="btn">点我一下</button>
<iframe src="https://www.lilichao.com" frameborder="0"></iframe>
<script>
// const btn = document.getElementById("btn")
// console.log(btn)
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）