持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情
JavaScript BOM
BOM简介
1.什么是BOM
1.BOM全称Browser Object Model，翻译为浏览器对象模型。 2.BOM提供了很多对象(对象里面有属性和方法)，用于访问浏览器的功能，这些功能与任何网页内容无关。 3.BOM缺少规范，每个浏览器提供商都按照自己的想法去扩展它，那么浏览器共有对象就成了事实的标准。
2.BOM树
0.BOM 比 DOM 更大，它包含 DOM。 BOM由多个对象组成，代表浏览器窗口的window对象，是BOM的顶层对象，其他对象都是该对象的子对象。 1.window对象是BOM中所有对象的核心，表示整个浏览器窗口，但不必表示其中包含的内容。 window对象还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。 window对象是JavaScript的顶端对象之一，它是隶属于浏览器层次的，它独立于文档内容与浏览器之间。 2.navigator代表当前浏览器信息(版本号、运行的平台等)。 3.location代表浏览器的地址栏。 4.document代表整个页面文档内容。 5.history代表整个浏览器的历史记录(常用于操作翻页)。 6.screen代表整个浏览的屏幕。 7.frames代表整个窗口中的所有框架页。
1.window对象
1.window对象的特性
1.window对象是JavaScript访问浏览器窗口的一个接口。 2.window是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
<script type="text/javascript">
var sex = '男';
console.log(sex); //男（在调用window对象的属性的时候可以省略window）
console.log(window.sex); //男
function firstFunc() {
console.log('我是第一个函数');
}
firstFunc(); //我是第一个函数（在调用window对象的方法的时候可以省略window）
window.firstFunc(); //我是第一个函数
</script>
3.document等对象可以看成是window对象的一个属性，在使用的时候省略了window。
<div id="">我是一个div</div>
<script type="text/javascript">
console.log(window.document.querySelector('div')); //<div id="">我是一个div</div>
console.log(document.querySelector('div')); //<div id="">我是一个div</div>
</script>
2.window对象的对话框
| 对话框方法 | 说明 |
|---|---|
| alert(str) | 提示/警告对话框，显示str字符串的内容。只有一个确定按钮。尽量少用。 |
| confirm(str) | 确认对话框，显示str字符串的内容。带确定、取消两个按钮。 点确定时返回true；点取消时返回false。 |
| prompt(str[,value]) | 输入对话框，采用文本框输入信息。str为提示信息，value为初始值，可省略。 按确定按钮返回字符型的输入值，点击取消按钮时返回的值是undefined。 |
function firstFunc() {
alert("你好");
window.alert("你好");
var result = confirm("您确定要删除该项吗？");
console.log(result);
var result2 = window.confirm("您确定要删除该项吗？");
console.log(result2);
var age = prompt("请输入您的年龄", 18);
console.log(age);
var age2 = window.prompt("请输入您的年龄", 18);
console.log(age2);
if(age2==null){// 满足
console.log('age2==null');
}
if(age2===null){// 满足
console.log('age2===null');
}
if(age2==undefined){// 满足
console.log('age2==undefined');
}
if(age2===undefined){// 不满足
console.log('age2===undefined');
}
}
3.window对象实现窗口的打开与关闭
语法：window.open(url);（window可省略） 参数：url：打开的超链接； 返回值：返回新窗口对象。重复执行时，当前页面不变，打开任意次新窗口。
function firstFunc() {
window.open("https://www.baidu.com");
}
语法：window.open(url, name);（window可省略） 参数：url：打开的超链接；name：窗口的名称； 返回值：返回新窗口对象。重复执行时，当前页面不变，但同名窗口只能打开一次，再次打开时，仅刷新。
function firstFunc() {
window.open("https://www.baidu.com","百度首页"); //仅刷新。
window.open("https://www.2345.com", "2345首页"); //会打开任意次新窗口。
window.open("https://ai.taobao.com/search/index.htm", "淘宝首页"); //仅刷新一次，再新开。
}
语法：window.open(url, name, config);（window可省略） 参数：url：打开的超链接；name：窗口的名称；config：窗口的配置参数，代表很多参数（高度、宽度等等）。 返回值：返回新窗口对象。
function firstFunc() {
var openurl = "https://www.baidu.com";
var config = "width=500,height=300";
var newWin = window.open(openurl, "popwin", config);
console.log(newWin);
var openurl2 = "https://www.2345.com";
var config2 = "width=600,height=200";
var newWin2 = window.open(openurl2, "popwin2", config2);
console.log(newWin2);
var newWin3 = window.open(openurl2, "popwin3");
console.log(newWin3);
}
<button type="button" onclick="javascript:firstFunc()">打开百度和2345首页</button>
语法：windowObj.close(); 参数：无 返回值：无 作用：关闭窗口
function firstFunc() {
var newWin = window.open("https://www.baidu.com");
var newWin2 = window.open("https://www.2345.com");
newWin.close();
}
a元素打开窗口： <a href="" target="_self"></a>：替换当前页面。 <a href="" target="_blank"></a>：当前页面不变，打开任意次新窗口。
<a href="https://www.baidu.com" target="_self">百度首页</a>
<a href="https://www.2345.com" target="_blank">2345首页</a>
4.window对象的定时器
定时器多用于网页动态时钟、制作倒计时、跑马灯效果等。
1.炸弹定时器
炸弹定时器又叫一次性定时器或一次性时钟。
语法：window.setTimeout(func, ms);（window可省略） 参数：func-调用的函数(该调用函数也称为回调函数 callback)；ms-延迟的毫秒数，省略时默认是0。 返回值：返回已经启动的定时器。实际返回的是定时器的id，测试发现第一次启动返回2，后面启动依次递增。 函数，也可以是函数名(函数另写)。
function firstFunc() {
/* 1.回调函数是一个匿名函数 */
var timer = setTimeout(function() {
console.log('时间到，爆炸！');
}, 3000);
console.log(timer);
/* 2.回调函数是一个有名函数 */
function callback() {
console.log('时间到，嘭嘭！');
}
var timer2 = setTimeout(callback, 5000);
console.log(timer2);
}
<button type="button" onclick="javascript:firstFunc()">启动炸弹定时器</button>
语法：window.clearTimeout(timer);（window可省略） 参数：timer-之前返回的已经启动的定时器。 返回值：无 说明：停止启动的定时器
<button type="button" onclick="javascript:firstFunc()">停止炸弹定时器</button>
<script type="text/javascript">
/* 1.加载时自动开启定时器 */
var timer = setTimeout(function() {
console.log('时间到，爆炸！');
}, 3000);
/* 2.点击按钮停止定时器 */
var btn = document.querySelector('button');
btn.onclick = function() {
clearTimeout(timer);
console.log('已停止！');
}
</script>
2.闹钟定时器
闹钟定时器又叫周期性定时器或周期性时钟。
语法：window.setInterval(func, ms);（window可省略） 参数：func-调用的函数(该调用函数也称为回调函数 callback)；ms-间隔的毫秒数，省略时默认是0。 返回值：返回已经启动的定时器。实际返回的是定时器的id，测试发现第一次启动返回2，后面启动依次递增。 说明：表示间隔ms毫秒之后，周期性地执行func。func可以是匿名函数，也可以是函数名(函数另写)。 注意：第一次执行，也会间隔ms毫秒之后才开始。
function firstFunc() {
/* 1.回调函数是一个匿名函数 */
var timer = setInterval(function() {
console.log('新的一天开始了！');
}, 3000);
console.log(timer);
/* 2.回调函数是一个有名函数 */
function callback() {
console.log('又一天结束了！');
}
var timer2 = setInterval(callback, 5000);
console.log(timer2);
}
<button type="button" onclick="javascript:firstFunc()">启动闹钟定时器</button>
语法：window.clearInterval(timer);（window可省略） 参数：timer-之前返回的已经启动的定时器。 返回值：无 说明：停止启动的定时器
<button type="button" onclick="javascript:firstFunc()">停止闹钟定时器</button>
<script type="text/javascript">
/* 1.加载时自动开启定时器 */
var timer = setInterval(function() {
console.log('新的一天开始了！');
}, 3000);
/* 2.点击按钮停止定时器 */
var btn = document.querySelector('button');
btn.onclick = function() {
clearInterval(timer);
console.log('已停止！');
}
</script>
5.window对象的窗口(页面)加载事件
1.onload事件
当文档内容完全加载完成（包括图像、脚本文件、CSS 文件等），会触发该事件, 就调用该事件的处理函数。
1.window.onload = 匿名函数；
window.onload = 函数名;
window['onload'] = 函数名; //函数单独写
2.window.addEventListener('load', 匿名函数); //IE9及其以上才支持
window.addEventListener('load', 函数名); //函数单独写//IE9及其以上才支持
注：只有这里列举的实现方式，没有列举到的方式皆不可。
2.DOMContentLoaded事件
如果页面有很多图片的话，加载会比较慢，那么从用户访问到onload触发，就需要较长的时间，交互效果就不能实现，从而影响用户的体验，此时用DOMContentLoaded 事件比较合适。 当DOM加载完成（不包括样式表，图片，flash等），会触发该事件。
document.addEventListener('DOMContentLoaded', 匿名函数); //IE9及其以上才支持
document.addEventListener('DOMContentLoaded', 函数名); //函数单独写//IE9及其以上才支持
注：只有这里列举的实现方式，没有列举到的方式皆不可。
<script>
window.addEventListener('load', function() {
console.log('load');
})
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
})
</script>
6.window对象的调整窗口大小事件
1.onresize事件
只要窗口大小发生像素变化，就会触发这个事件。我们经常利用这个事件完成响应式布局(如某个元素显示与否)。
1.window.onresize = 匿名函数；
window.onresize = 函数名;
window['onresize'] = 函数名; //函数单独写
2.window.addEventListener('resize', 匿名函数); //IE9及其以上才支持
window.addEventListener('resize', 函数名); //函数单独写//IE9及其以上才支持
注：只有这里列举的实现方式，没有列举到的方式皆不可。
<div>我是一个div</div>
<script>
var div = document.querySelector('div');
/* 注册页面加载事件 */
window.onload = function() {
/* 注册调整窗口大小事件 */
window.onresize = function() {
console.log('窗口大小变化了！');
if (window.innerWidth <= 900) { //window.innerWidth 获取当前屏幕的宽度获取
div.style.color = 'red';
//div.style.display = 'none'; //设置div不显示
} else {
div.style.color = 'blue';
//div.style.display = 'block'; //设置div显示
}
}
}
</script>
