扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“JavaScript的BOM技术怎么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript的BOM技术怎么用”吧！
创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务常州,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
BOM = Browser Object Model 浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分
| DOM | BOM |
|---|---|
| 文档对象模型 | 浏览器对象模型 |
| DOM 就是把文档当作一个对象来看待 | 把浏览器当作一个对象来看待 |
| DOM 的顶级对象是document | BOM 的顶级对象是window |
| DOM 主要学习的是操作页面元素 | BOM 学习的是浏览器窗口交互的一些对象 |
| DOM 是 W3C 标准规范 | BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差 |
BOM 比 DOM 更大。它包含 DOM。
window 对象是浏览器的顶级对象，它具有双重角色
它是 JS 访问浏览器窗口的一个接口
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。
注意：window下的一个特殊属性 window.name
// 定义在全局作用域中的变量会变成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.num);window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
window.onload = function(){
};// 或者window.addEventListener("load",function(){});注意：
有了window.onload就可以把JS代码写到页面元素的上方
因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload 传统注册事件方式，只能写一次
如果有多个，会以最后一个window.onload为准
如果使用addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})接收两个参数：
DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间
交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。
load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等
DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
window.onresize = function() {}// 或者window.addEventListener('resize',function(){});只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
window 对象给我们提供了两个定时器
setTimeout()
setInterval()
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
window.setTimeout(调用函数,[延迟的毫秒数]);
注意：
window可以省略
这个调用函数
可以直接写函数
或者写函数名
或者采取字符串 ‘函数名()’（不推荐）
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
setTimeout() 这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。
clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器
window.clearTimeout(timeoutID)
注意：
window可以省略
里面的参数就是定时器的标识符
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
window.setInterval(回调函数,[间隔的毫秒数]);
window可以省略
这个回调函数:
可以直接写函数
或者写函数名
或者采取字符 ‘函数名()’
第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次
clearInterval ( ) 方法取消了先前通过调用 setInterval() 建立的定时器
注意：
window可以省略
里面的参数就是定时器的标识符