JS中DOM与的BOM区别以及onload事件与onDOMContentLoaded事件

Revin050

已于 2022-07-16 10:26:42 修改

阅读量1.3k

点赞数 1

分类专栏： JS 文章标签： javascript 前端 css3

于 2022-01-14 23:35:47 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122503893

版权

JS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

JS中DOM与BOM的区别

DOM

DOM是文本对象模型
DOM的顶级对象是document
DOM把文档当成对象来看待
DOM主要是对页面元素进行操作

BOM

BOM是浏览器对象模型
BOM的顶级对象是window
BOM把浏览器当成对象来看待
BOM主要是对浏览器窗口进行进行操作

需要注意的是
1.window对象是浏览器的顶级对象。以往代码中document.querySelector()实际上可以写成window.document.querySelector()
2.window对象是一个全局对象。全局作用域中的变量与函数都会成为window对象的属性和方法。
例如下面一段代码

<body>
    <script>
        var num = 10;
         // 在这里window.num==num
        console.log(num);
        console.log(window.num);
       
    </script>
</body>

onload事件与onDOMContentLoaded事件

onload

window.onload事件的含义是指当文档内容完全加载完成后（包括图像、CSS等），触发该事件。
具体使用如下所示。

<body>
    //情景1 点击button按钮，无法弹出文本框。解释：未加载到btn因此无法执行click事件
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
        })
    </script>
    <button>点击</button>
</body>

<body>
    //情景2点击button按钮，可以弹出文本框。解释：由于先加载文档内容，随后执行弹窗事件，所以可以顺利执行。
	<script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('弹窗');
            })
        }
    </script>
    <button>点击</button>
</body>

onDOMContentLoaded

onDOMContentLoaded事件与window.onload事件类似。
onDOMContentLoaded含义是指仅当DOM加载完成，不用等待图片、flash等。因此onDOMContentLoaded速度比window.onload要快。需要注意的是onDOMContentLoaded存在兼容性问题，仅支持ie9以上。使用时注意onDOMContentLoaded的监听数据源为document
具体使用如下所示。

<body>
	<script>
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
    </script>
</body>

Revin050

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS中DOM与的BOM区别以及onload事件与onDOMContentLoaded事件

简单介绍JS中DOM与的BOM区别以及onload事件与onDOMContentLoaded事件
复制链接

扫一扫

专栏目录