JS中的BOM

一、Bom的基本概述

1.1 Bom的概述

• Bom是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
• BOM由一系列相关的对象构成，并且每个对象都提供了许多方法与属性
• BOM缺乏标准，JS语法的标准化组织是ECMA，DOM标准化组织是W3C，BOM最初是Nerscape浏览器标准的一部分。

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

1.2 Bom的构成

1.2.1 window对象

window对象的基本概念

• window对象是浏览器的顶级对象，具有双重角色
• 它是JS访问浏览器窗口的一个接口
• 它也是一个全局对象，定义在全局作用域中的变量、函数都会编程window对象的属性和方法，在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（）、prompt（）等

window常见的事件

窗口加载事件

• window.onload = function( ){ } / window.addEventListener( “load” , function( ){ });
• 概念： 当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
• 注意事项：有了window.onload就可以把JS代码写到页面元素的上方，因为onload等页面内容全部加载完毕，再去执行函数，但是该传统注册方式只能够写一次，如果有多个，以最后一个为准。但是使用window.addEventListener(“load”,function(){})无限制。
• window.addEventListener(“DOMContentLoaded,function(){}”):等DOM内容加载完毕就可以执行，不包含图片、flash、css等，加载速度比load快。

	//先弹出alert再显示btn按钮
	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(