BOM对象-JavaScript笔记
什么是BOM
BOM - 浏览器对象模型（BrowserObjectModel）
浏览器对象模型(Browser Object Model,简称BOM)是浏览器的内置对象管理模型。
可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
在前端页面开发时，可以通过对浏览器的内置对象进行控制，提高Html页面的动态效果，增强用户对页面文件的体验。
BOM对象模型结构
后续可以根据该图协助理解
window对象
window对象-BOM核心
BOM 的操作入口为 window 对象，即浏览器下的全局对象
window，顾名思义，窗口对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。同时， window对象还是 ECMAScript（JavaScript的一个标准）中的 Global （全局）对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。
- 所有浏览器都支持window对象。它表示浏览器窗口
- —个html文档对应—个window对象
- 控制浏览器窗口的
- window对象不需要创建对象，直接使用即可
- 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
挂载在window对象上的全局方法：
弹框类的方法。前面省略window
alert(‘提示信息’)
confirm(“确认信息”)
prompt(“弹出输入框”)
open(“url地址”，“_black或_self”，“新窗口的大小”）
close() 关闭当前的网页
定时器，清除定时器
setTimeout(函数，时间) 只执行一次
clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。
setInterval(函数，时间) 无限执行
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
Cookies 用于存储 web 页面的用户信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。
document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;
全局变量
1-声明在最外层的变量为全局变量（声明在函数内部为局部变量）
2-将变量挂载到window对象上即为全局变量（可省略window，即隐式声明）
如果需要声明全局变量，尽量选择在最外层var 变量名的方式声明，
也可以使用window.变量名的方式，但尽量不要使用隐式声明
（ 区分显示声明与隐式声明当我们使用访问一个没有声明的变量时，JS会报错；而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式声明一个全局变量 更多）
window对象常用方法
打开一个新窗口
window.open()
window.open(“url地址”，“_black或_self或窗口名称”，“新窗口的大小width、height、left、top”）
关闭当前窗口
window.close()
window对象常用属性
window对象常用事件
1.页面加载事件
用于在网页加载完毕后立刻执行的操作
方式1：window.onload = function(){ }
window.addEventListener(‘load’,function(){ })
window.onload 是窗口（页面）加载事件，当文档内容完全加载成功，就会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
注意：
1.有了 window.pnload 就可以把JS代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
2.window .onload 传统注册事件方式只能写一次，如果有多个，会议最后一个 window.onload 为准。
3.如果使用 addEventListener 则没有限制
方式2：document.addEventListener(‘DOMContentLoaded’,function(){ })
即：window.οnlοad=匿名函数
DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash等等。IE9以上才支持
注意：
如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded 时间比较合适。
2.调整窗口大小事件
window.onresize = function(){ }
window.addEventLisener(‘load’,function(){});
window.onload 是调整窗口大小加载事件，当触发时就调用是处理函数
注意：
1.只要窗口大小发生像素变化就会触发这个事件
2.经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕宽度。innerHeight 当前屏幕高度
3.定时器（两种方式）
1.setTimeout( ) （方式一）
语法规范：window.setTimeout(调用函数，延时时间)； // 这里的调用函数，也称作是回调函数 callback
1.这个 window 在调用时可以省略
2.这个延时时间单位是毫秒，可以省略不写，如果省略默认是0，立即执行
3.这个调用函数可以直接写函数（callback），还可以写函数名（‘callback( )’）
4.页面中可能有很多的定时器，我们经常给定时器加标识符（名字）区分
案例：（三种写法）
方式1：
setTimeout(function(
console.log(‘时间到了’);
){},3000)
方式2：
function callback(){
console.log(‘时间到’);
}
var timer1 = setTimeout(callback,3000);
方式3：
var timer2 = setTimeout(‘callback()’,5000); //不推荐使用
2.setInterval( )（方式二）
window.setInterval(回调函数，[ 间隔的毫秒 ])；
setInterval( ) 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
3.setTimeout 和 setInterval 的区别：
3.1 setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器
3.2 setInterout 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
2.清除定时器（两种方式）
1.clearTimeout（方式一）
window.clearTimeout( timeoutID ); // window 也可以省略
里面的参数就是定时器的标识符
clearTimeout( ) 方法取消了之前通过调用 setTimeout( ) 建立的定时器
案例：
var timer = setTimeout(function(){
console.log(‘弹出来了’);
},2000);
btn.addEventListener(‘click’,function(){
clearTimeout( timer );
})
2.clearInterval( )（方式二）
var timer= null ; // 设置成全局变量，才能在不同函数中使用
btns[0].οnclick=function(){
timer=setInterval(function(){
console.log(‘123’);
},1000);
}
btns[1].οnclick=function(){
clearInterval(timer);
}
location对象
location 对象
对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
location.herf = ‘url地址’
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.portocol 返回页面使用的web协议。 http:或https:
navigator对象
navigator 对象
对象提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断。
window.navigator 对象在编写时可不使用 window 这个前缀。
screen对象
主要用来获取用户的屏幕信息。
window.screen对象在编写时可以不使用 window 这个前缀
height: 获取整个屏幕的高。
width : 获取整个屏幕的宽。
availHeight: 整个屏幕的高减去系统部件的高（ 可用的屏幕宽度 ）
availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度 ）
history对象
history 对象
对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
back() 返回上一页。
forward() 返回下一页。
go(“参数”) -1表示上一页，1表示下一页。
frames框架
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中
在父页面中，可通过window.frames[“frame1”]访问子页面的window对象（需等frame加载完毕）
在子页面中，可通过window.parent访问父页面的window对象（需等frame加载完毕）
子调父：
元素：
① window.parent.document.getElementById(“父页面元素ID”);
②window.parent.document.getElementsByTagName(“父页面元素标签名”)[i];
③window.parent.document.getElementsByClassName(“父页面元素类名”)[i];
方法：window.parent.父页面方法;
父调子：
元素：window.frames[iframe的name属性值];
方法：
① document.getElementById(“子页面元素ID”).contentWindow.子页面方法名;
② document.getElementsByTagName(“子页面元素标签名”)[i].contentWindow.子页面方法名;
③ document.getElementsByClassName(“子页面元素类名”)[i].contentWindow.子页面方法名;
文中部分内容来源网络搜索，此文仅为学习使用