web前端学习笔记21-浏览器对象模型BOM（window对象）

一、BOM

1.1 什么是BOM

Browser Object Model 浏览器对象模型

1.2 BOM的作用

BOM的作用是用于连接js语言和浏览器行为的一个中间结构。如果把浏览器比作空调，BOM就是遥控器，js可以通过操作BOM实现浏览器对应的行为变化

1.3 BOM的本质

BOM是js可以操作的内容，所以他的本质是对象，BOM在js中是一个对象，window对象就是BOM本身

二、window对象分析

js中，window对象就是语法的Global固有对象
浏览器中，window对象就是BOM的替身

2.1 window对象的子对象

关键字	释义
document	表示浏览器的文档部分（文档对象）BOM
location	表示浏览器位置相关对象
frames	表示浏览器框架集相关信息的对象
history	浏览器历史信息对象
screen	浏览器屏幕信息对象
navigator	浏览器信息对象

所有window的内容是已存在的变量不可以使用其作为变量名

// BOM在浏览器中的名称
// js中，window对象就是语法的Global固有对象
// 浏览器中，window对象就是BOM的替身
console.log(window);
// 输出子对象
console.log(window.document);  //文档
console.log(window.history); //历史记录
console.log(window.screen);  //屏幕
console.log(window.location);  //地址
console.log(window.frames);  //框架
console.log(window.navigator);  //信息
// js语法
var he='张三';
console.log(he);
console.log(window.he);  //结果相同

// 输出子对象(所有window的内容是已存在的变量不可以使用其作为变量名)
console.log(document);  //文档
console.log(history); //历史记录
console.log(screen);  //屏幕
console.log(location);  //地址
console.log(frames);  //框架
console.log(navigator);  //信息

2.2 window对象自身的功能

2.2.1 浏览器大小位置相关方法

关键字	释义
innerWidth	表示浏览器视窗的宽度
innerHeight	表示浏览器视窗的高度
document.documentElement.clientWidth	低版本IE浏览器获取浏览器视窗的宽度
document.documentElement.clientHeight	低版本IE浏览器获取浏览器视窗的高度
screenLeft	浏览器距离屏幕左侧的距离（非firefox浏览器和新版firefox）
screenTop	浏览器距离屏幕顶部的距离（非firefox浏览器和新版firefox）
screenX	浏览器距离屏幕左侧的距离（firefox浏览器）
screenY	浏览器距离屏幕顶部的距离（firefox浏览器）
resizeTo(宽度,高度)	将浏览器设置为指定的宽度和高度（必须在单标签浏览器中使用）
resizeBy(水平长度,垂直长度)	将浏览器在当前宽高的基础上增加或者减少指定长度的宽高 长度为正增加，长度为负减少（必须在单标签浏览器中使用）
moveTo(水平坐标,垂直坐标)	将浏览器移动到指定坐标（必须在单标签浏览器中使用）
moveBy(水平长度,垂直长度)	将浏览器在当前位置基础上移动指定的长度（必须在单标签浏览器中使用）

// 1. 获取浏览器视窗宽高
console.log(window.innerWidth);  //显式浏览器当前的宽度
console.log(window.innerHeight);  //显式浏览器当前的高度
console.log(document.documentElement.clientWidth);  //低版本IE浏览器获取浏览器视窗的宽度
console.log(document.documentElement.clientHeight);  //低版本IE浏览器获取浏览器视窗的高度
// 2. 浏览器位置信息属性
console.log(window.screenLeft);  //浏览器距离屏幕左侧的距离
console.log(window.screenTop);  //浏览器距离屏幕顶部的距离
console.log(window.screenX);  //老版本firefox
console.log(window.screenY);  //老版本firefox
// 3. 浏览器窗口大小调整方法（必须在单标签浏览器中才有效果，目前浏览器多为多标签，此功能几乎不用）
window.resizeTo(600,600);  //浏览器设置为指定宽高
window.resizeBy(20,0);   //在原来基础上增加或减少指定长度，每刷新一次累加（减）一次
// 4. 浏览器位置大小调整方法（必须在单标签浏览器中使用）
window.moveTo(100,300);  //将浏览器移动到指定坐标
window.moveBy(20,10);  // 将浏览器在当前位置基础上移动指定的长度

2.2.2 定时执行和循环执行相关方法

定时变量=setTimeout(回调函数,时间); 设置定时执行操作

• 方法1：setTimeout(函数名,时间);
• 方法2：setTimeout(匿名函数,时间);
• 方法3：setTimeout( ‘调用函数字符串’ ,时间);

循环变量=setInterval(回调函数,时间); 循环执行方法

• 方法1：setInterval(函数名,时间);
• 方法2：setInterval(匿名函数,时间);
• 方法3：setInterval( ‘调用函数字符串’ ,时间);

clearTimeout(定时变量); 取消定时执行操作
clearInterval(循环变量); 取消循环执行操作

// 5. 定时执行
// 方法1：匿名函数
window.setTimeout(function(){
	console.log('今天天气不错');
},5000); // 等待5秒执行
// 方法2：声明函数
function yanshi(){
	console.log('今天天气不好');
}
window.setTimeout(yanshi,6000);
// 方法3：字符串
function yanshi1(){
	console.log('今天天气咋样');
}
window.setTimeout('yanshi1()',7000);

// 6. 循环执行
// 方法1：匿名函数
var i=0; //计数变量
window.setInterval(function(){
	console.log('我们一起出去玩'+i);
	i+=1;
},2000);  //每两秒循环
// 方法2：声明函数
function xunhuan(){
	console.log('我们一起');
}
window.setInterval(xunhuan,3000);
// 方法3：字符串
function xunhuan1(){
	console.log('一起玩');
}
window.setInterval('xunhuan1()',1000);

// 清除定时
// <!-- button按钮点击停止定时操作 -->
// <button οnclick="stopds()">停止定时</button>
var ds=window.setTimeout(function(){
	console.log('小明去吃饭');
},3000); // 等待3秒执行
// button按钮调用的函数
function stopds(){
	window.clearTimeout(ds);
}

// 清除循环
var j=0; //计数变量
var xh=window.setInterval(function(){
	j+=1;
	console.log('我们一起出去玩'+j);
	if(j==5){
		window.clearInterval(xh);
	}
},1000);  //每两秒循环

2.2.3 浏览器的三种弹窗

关键字	释义
alert();	系统警告弹窗。用于弹出窗口警示用户，提示信息
confirm();	系统确认弹窗。根据用户行为进行不同的操作，返回true(确定)或false(取消)
prompt(‘提示信息字符串’,‘默认值字符串’);	系统输入弹窗。用于接收用户在弹窗中输入的字符串，返回用户输入的信息

<!-- 浏览器的三种弹窗 -->
<button onclick="jg()">警告弹窗</button>
<button onclick="xz()">选择弹窗</button>
<button onclick="sr()">输入弹窗</button>

// 浏览器的三种弹窗
// 系统警告弹窗alert
function jg(){
	window.alert('警告：用户名不能为空');
}
// 系统确认弹窗confirm
function xz(){
	var res=window.confirm('确认提交？');
	console.log(res);
}
// 系统输入弹窗prompt
function sr(){
	var res1=window.prompt('请输入用户名','user123');
	console.log(res1);
}