复习笔记之API(9) BOM浏览器对象模型

BOM浏览器对象模型

BOM(Browser Object Module)概述：浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
• BOM是缺乏标准的，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

================
DOM和BOM的区别：

DOM	BOM
文档对象模型	浏览器对象模型
DOM是把文档当作一个对象来看待	BOM是把浏览器当作一个对象来看待
DOM的顶级对象是document	BOM的顶级对象是window
DOM主要学习的是操作页面元素	BOM学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范的	BOM是浏览器厂商在各自浏览器上定义的(兼容性较差)

BOM的构成.png

window对象是浏览器的顶级对象，它具有双重角色

• 它是JS访问浏览器的一个接口
• 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法(在调用的时候可以省略window;例如alert()、prompt()等都是window对象的方法)
• window下有一个特殊属性wondow.name,所以设置变量的时候尽量不要用name

// 查看window里面的属性和方法
console.dir(window);

window常见的事件

窗口加载事件

• window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数
• document.addEventListener('DOMContentLoaded', function() {})
  • DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等(IE9以上才支持)
  • 如果页面图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

window.onload = function() {}
// 或者
window.addEventListener('load', function() {})

window.addEventListener('load', function() {
    alert(123);
})
window.addEventListener('DOMContentLoaded', function() {
    alert(123); //=>先加载完
})

• 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面中的内容全部加载完毕再去执行处理函数
• window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
• 如果使用addEventListener则没有限制

load和DOMContentLoaded的区别：

• load等页面内容全部加载完毕(包含页面中的DOM元素、图片、CSS等等)
• addEventListener等DOM加载完毕(不包含图片、CSS等)就可以执行，加载速度比load更快一些

调整窗口大小事件

• window.onresize = function() {}
• window.addEventListener('resize', function() {});

• onresize是调整窗口大小加载事件、当触发是就调用的处理函数
  • 只要窗口大小发生像素变化，就会触发这个事件
  • 利用这个事件完成响应式布局(window.innerWidth当前屏幕的宽度)

window.addEventListener('resize', function() {
    console.log('变化了');
});

=============
案例练习

<script>
    window.addEventListener('load', function() {
        let div = document.querySelector('div');
        window.addEventListener('resize', function() {
            if(window.innerWidth <= 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>
<div style="width:100px; height:100px; background-color: #000;">