BOM概述 DOMBOM

  文档对象模型

  浏览器对象模型

  DOM 就是把 文档 当作一个对象来看待

  把 浏览器当作一个对象来看待

  DOM 的顶级对象是 document

  BOM 的顶级对象是 window

  DOM 主要学习的是操作页面元素

  BOM 学习的是浏览器窗口交互的一些对象

  DOM 是 W3C 标准规范

  BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

  <pre>// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10
​
// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
   console.log(11);
}
console.fn();
// 11
​
var name = 10;  //不要用这个name变量,因为window下有一个特殊属性window.name
console.log(window.urname);</pre>

  window 对象的常见事件 窗口加载事件

  <pre>window.onload = function(){
   
};
// 或者
window.addEventListener("load",function(){
​
});</pre>

  window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

  <pre>document.addEventListener('DOMContentLoaded',function(){
​
})</pre>

  区别

  <pre>    // window.onload = function() {
   //     var btn = document.querySelector('button');
   //     btn.addEventListener('click', function() {
   //         alert('点击我');
   //     })
   // }
   // window.onload = function() {
   //     alert(22);
   // }
   
   window.addEventListener('load', function() {
       var btn = document.querySelector('button');
       btn.addEventListener('click', function() {
           alert('点击我');
      })
  })
   window.addEventListener('load', function() {
​
       alert(22);
  })
   document.addEventListener('DOMContentLoaded', function() {
           alert(33);
      })
       // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
       // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些</pre>

  调整窗口大小事件

  window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

  <pre>window.onresize = function() {}
// 或者
window.addEventListener('resize',function(){});</pre>

<p><pre>
   
       window.addEventListener('load', function() {
           var div = document.querySelector('div');
           window.addEventListener('resize', function() {
               console.log(window.innerWidth);
​
               console.log('变化了');
               if (window.innerWidth