BOM（Browser Object Model）即浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。
一、window对象
BOM分核心对象是window，它表示浏览器的一个实例。window对象处于JS结构的顶层位置，对于每一个打开的窗口，系统都会自动为其定义一个window对象。
JS结构层次：
1、对象的属性和方法
window对象有一系列的属性，这些属性本省又是对象，
| 属性 | 含义 |
| closed | 当关闭窗口时为真 |
| defaultStatus | 窗口底部状态栏显示的默认状态消息 |
| document | 当前窗口中显示的文档对象 |
| frames | 窗口中的框架对象数组 |
| history | 保存窗口最近加载的URL |
| length | 窗口中的框架数 |
| location | 当前窗口的URL |
| name | 窗口名 |
| offscreenBuffering | 用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新 |
| opener | 打开当前窗口 |
| parent | 指向包含另一个窗口的窗口（由框架使用） |
| screen | 显示屏幕相关信息，如高度、宽度（单位像素） |
| self | 指示当前窗口 |
| status | 描述由用户交互导致的状态栏的临时信息 |
| top | 包含特定窗口的最顶层窗口（有框架使用） |
| window | 指示当前窗口，与self等效 |
| 方法 | 功能 |
| alert（text） | 创建一个警告对话框，显示一条信息 |
| blur() | 将焦点从窗口移除 |
| clearInterval（interval） | 清除之前设定的定时器间隔 |
| clearTimeOut（timer） | 清除之前设置的超时 |
| close() | 关闭窗口 |
| confirm() | 创建一个需要用户确认的对话框 |
| focus() | 将焦点移至窗口 |
| open(url,name,[options]) | 打开一个新窗口并返回新的window对象 |
| prompt(text,defaultInput) | 创建一个对话框要求用户输入信息 |
| scroll(x,y) | 在窗口中滚动到有个像素点的位置 |
| setInterval(expression,milliseconds) | 经过指定时间间隔后计算一个表达式 |
| setInterval(function,milliseconds,[arguments]) | 经过指定时间间隔后调用一个函数 |
| setTimeout(expression,milliseconds) | 在定时器超过后计算一个表达式 |
| setTimeout(expression,milliseconds,[arguments]) | 在定时器超过后调用一个函数 |
| print() | 调出打印对话框 |
| find() | 调出查找对话框 |
window对象下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用，效果等同。例如：window.alert()和alert()是一个意思。
对于window对象的方法有诸多在学习记录-关于输出中有所整理。
2、窗口的大小与位置
（1）位置信息
IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性用来确定和修改window对象的位置，Firefox、Safari和Chrome也可在screenX和screenY属性中提供相同的窗口位置信息。
alert(screenLeft);
//小窗口模式，窗口放在屏幕任意位置，显示窗口到左屏幕的距离
//全屏模式，贴着左屏幕，距离当然为0
alert(typeof screenLeft); //返回number
alert(screenX); //X为到左屏幕距离，Y为到上屏幕距离对于不同浏览器，表示的位置也不同，因此可用跨浏览器的方法来表示（三目运算符），
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;
（2）大小信息
而对窗口页面大小的修改，Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth和innerHeight，返回浏览器窗口本身的尺寸；outerWidth和outerHeight，返回浏览器窗口本身及边框的尺寸。
alert(innerWidth); //页面长度
alert(innerHeight); //页面高度
alert(outerWidth); //页面长度+边框
alert(outerHeight); //页面高度+边框
（3）保存信息
在IE以及Firefox、Safari、Opera和Chrome浏览器的标准模式中，
document.documentElement.clientWidth 和 document.documentElement.clientHeight中保存了页面窗口的信息。
var width=window.innerWidth;
var height=window.innerHeight;
if(typeof width!="number"){
if(document.compatMode=="CSS1Compat"){
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
else{
width=document.body.clientWidth;
height=document.body.clientHeight;
}
}上述代码可以适用于不同模式，document.compatMode可以确定页面是否处于标准模式，如果返回CSS1Compat即标准模式。当不是标准模式时，通过document.body.clientWidth和document.body.clientHeight取得相同的信息。
3、间歇调用和超时调用
JavaScript是单线程语言，
由此不禁想起了操作系统的知识
什么是进程？
当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。什么是线程？
线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)，但代码区是共享的。即不同的线程可以执行同样的函数。什么是单线程？
每个正在运行的程序（即进程），至少包括一个线程，这个线程叫主线程。主线程在程序启动时被创建，用于执行main函数。所以只有一个主线程的程序，称作单线程程序。主线程负责执行程序的所有代码（UI展现以及刷新，网络请求，本地存储等等）。这些代码只能顺序执行，无法并发执行什么是多线程？
多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务。也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。单线程、多线程的区别
单线程程序：只有一个线程，代码顺序执行，容易出现代码阻塞（页面假死）
多线程程序：有多个线程，线程间独立运行，能有效地避免代码阻塞，并且提高程序的运行性能
但JS允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
（1）超时值是在指定的时间过后执行代码，
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。其中第一个参数可以为字符串，里面可以为代码块，因为它有解析的功能，所以引号内部是可以执行的。
function demo(){
alert("bert");
}
setTimeout(demo,1000); //第二个参数表示最终输出显示的延迟时间
//等价于
setTimeout(function(){ //此方法更好，直接使用函数传入的方法，扩展性好，性能更佳。
alert("bert");
},1000);调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
//引用w3school例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器</title>
<script type="text/javascript">
var number=0;
var count;
function timedCount(){
document.getElementById('txt').value=number;
number=number+1;
count=setTimeout("timedCount()",2000);
}
function stopCount(){
clearTimeout(count);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onClick="stopCount()" />
</form>
</body>
</html>实验结果，很疑惑，
点击Start count!按钮一次，文本框中数字每两千毫秒递增，点击Stop count!按钮会停止当前的增长。但是如果连续点击Start count!按钮多次，则会出现一段数字突然快速增长，然后缓慢之后又是一段数字快速增长；多次点击Stop count!按钮则会不断减速。
（2）间歇时间值则是每隔指定的时间就执行一次代码。
间歇调用按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数：要执行的代码和每次执行之前需要等待的毫秒数。
setInterval(function(){
alert("bert");
},1000); //每隔1000毫秒弹出警告框信息取消间歇调用方法，使用clearInterval()方法。取消间歇调用十分重要，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
var begin = 0; //设置起始秒
var end = 5; //设置最终秒
setInterval(function(){ //间歇调用
begin++; //递增num
if (begin == end) { //如果得到5秒
clearInterval(this); //取消间歇调用，this表示方法本身
alert('5秒后弹窗！');
}
}, 1000); //1秒一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。
var begin=0;
var end=5;
function demo(){
begin++;
if(begin==end){
alert("5秒后结束");
}
else{
setTimeout(demo,1000);
}
}
setTimeout(demo,1000);二、location对象
location对象是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性，所以window . location和document . location等效。
| 属性 | 描述的URL内容 |
| hash | 如果该部分存在表示锚点部分 |
| host | 主机名：端口号 |
| hostname | 主机名 |
| href | 整个URL |
| pathname |
路径名 |
| port | 端口号 |
| protocol | 协议部分 |
| search | 查询字符串 |
| 方法 | 功能 |
| assign() | 跳转到指定页面，与href等效 |
| reload() | 重载当前URL |
| repalce() | 用新的URL替换当前页面，不产生任何历史记录的跳转（不好回头） |
该些属性方法需在服务器上运行。
三、history对象
history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。
| 属性 | 描述URL中的哪部分 |
| length | history对象中的记录数 |
| 方法 | 功能 |
| back() | 前往浏览器历史条目前一个URL，类似后退 |
| forward() | 前往浏览器历史条目下一个URL，类似前进 |
| go(num) | 浏览器在history对象中向前或向后 |
同样在服务器上运行才可以，
function back(){
history.back();
}
function forward(){
history.forward();
}
<a href="javascript:back">上一页</a>
<a href="javascript:forward">下一页</a>