1、BOM概述
1.1、BOM简介
BOM（browser Object）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JS语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
1.2、DOM与BOM的区别
| 类别 | DOM | BOM |
| 1 | 文档对象模型 | 浏览器对象模型 |
| 2 | DOM是把文档当做一个对象来看待 | 把浏览器当做一个对象来看待 |
| 3 | 顶级对象是document | 顶级对象是window |
| 4 | 主要学习操作页面元素 | 学习浏览器窗口交互的一些对象 |
| 5 | W3C标准规范 | 各浏览器厂商在各自浏览器上定义的标准，兼容性较差 |
1.3、BOM的构成(对象)
BOM比DOM更大，它包含DOM
| window | ||||
| document | location | navigation | screen | history |
Window
代表的是整个浏览器的窗口，同时windonw也是网页的全局对象
window 对象是浏览器的顶级对象，它具有双重角色
- 它是js访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用的时候，可以省略window，前面学习的对话框都属于window对象方法，如alert（），prompt（）等
注意：window下的一个特殊属性window.name，所以定义变量时，尽量不用name这个变量名
Navigator（浏览器的意思）
-代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location
-代表浏览器的地址栏信息，通过location可以获取地址栏信息，或者跳转页面
History
-代表浏览器的历史记录，可以通过该对象操作浏览器的历史记录
由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页
而且该操作只在当次访问有效
Screen
-代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
注意：这些BOM对象在浏览器中都是作为window对象的属性来保存的，可以通过window对象来使用，也可以直接使用
2、window对象的常见事件
2.1、onload窗口加载事件
1、window.οnlοad=function(){} 传统注册事件方式（只能写一次，如果有多个，会以最后一个为准）
2、window.addEventListener("load",function(){} )
当文档内容完全加载完成会触发该事件（包括图像，脚本文件、css文件等），就调用的处理函数
2.2、DOMContentLoaded窗口加载事件
document.addEventListener("DOMContentLoaded",function(){} )
<body>
<script>
//1、 onload写法
// window.onload = function () {
// var box = document.querySelector(".box");
// box.addEventListener("click", function () {
// this.style.backgroundColor = "pink";
// });
// };
//2、addEventListener 写法
// document.addEventListener("load", function () {
// var box = document.querySelector(".box");
// box.addEventListener("click", function () {
// this.style.backgroundColor = "pink";
// });
// });
//3、DOMContentLoaded写法
document.addEventListener("DOMContentLoaded", function () {
var box = document.querySelector(".box");
box.addEventListener("click", function () {
this.style.backgroundColor = "pink";
});
});
</script>
<!-- 需求：点击box，box背景色变化，js交互可以放在任意位置 -->
<div class="box">box</div>
</body>2.3、调整窗口大小事件
window.οnresize=function(){}
window.addEventListener("resize",function(){} )
调整窗口大小（像素）就会触发，调用内部处理函数，可以用来完成响应式效果
<!--需求：当前屏幕大小在800以内的时候，box消失，否则显示 -->
<div>box</div>
<script>
var box = document.querySelector("div");
window.addEventListener("resize", function () {
if (window.innerWidth < 800) {
box.style.display = "none";
} else {
box.style.display = "block";
}
});
</script>3、定时器
3.1、 setInterval() 定时调用
js的程序的执行速度是非常非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
语法：
setInterval(回调函数，间隔时间) 定时调用，可以将一个函数，每隔一段时间执行一次
参数：
第一个：回调函数，该函数会每隔一段时间调用一次
第二个：每次调用间隔时间，单位是毫秒
返回值：
返回一个Number类型的值，这个数字用来作为定时器的唯一标识
关闭定时器：
clearInterval(number)
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
<body>
<!-- 需求：页面出现出现数字，每秒自增1 -->
<h1 id="count"></h1>
<script>
var count = document.getElementById("count");
var num = 1;
var timer = setInterval(function () {
count.innerHTML = num++;
if (num == 5) {
clearInterval(timer);
}
}, 1000);
console.log(timer);//1
</script>
</body>3.2、 setTimeoutl() 延时调用
概念：延时调用,一个函数不马上执行，而是隔一段时间以后再执行 ，而且只会执行一次
语法：
window.setTimeout(回调函数，延迟秒数)
参数：
1、回调函数直接写函数，或者写函数名皆可
2、延迟秒数若省略，默认是0，单位是毫秒
返回值：数字标识
关闭定时器：clearTimeout(timer)
区别：定时调用会执行多次，而延时调用只会调用一次，延时调用和定时调用可以互相代替，在开发中，可根据自己的需要去选择
<script>
var num = 0;
var timer = setTimeout(function () {
console.log(num++);
}, 1000);
//使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);
</script>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » javaScriptBOM
发表评论 取消回复