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>

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

JS中DOM与BOM的区别

DOM

BOM

onload事件与onDOMContentLoaded事件

onload

onDOMContentLoaded