1、BOM概述

1.1 什么是BOM

BOM（browser Object Model）即浏览器对象模型，它提供了独立于内容而且与浏览器窗口进行交互的对象，其核心就是 window对象

BOM 由一系列的对象构成，并且每个对象都提供了很多方法和属性

但是需要注意的是：BOM缺乏标准，js语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是网景浏览器标准的一部分

下面来比较一下DOM 和 BOM 的区别：

序号	dom	BOM
1	文档对象模型	浏览器对象模型
2	把文档当成对象来看待	把浏览器当成对象来看待
3	`DOM` 的顶级对象是 `document`	`BOM`的顶级对象是 `window`
4	`DOM`主要学习的是操作页面元素	`BOM` 主要学习浏览器窗口交互的一些对象
5	W3C 标准规范	浏览器厂商在各自浏览器上定义的，兼容性较差

1.2 BOM的构成

DOM描述的处理网页内容的方法和接口，而BOM 描述的是与浏览器窗口进行交互的方法和接口

但是BOM范围比DOM大，因为它包含DOM

window对象是浏览器的顶级对象，它有双重角色

它是js访问浏览器的一个接口
它还是一个全局变量，定义在全局作用域中的变量、函数都会变成window对象的属性和方法

用var声明的全局变量和函数才都成为window对象的属性和方法，用 let 和 const 则不能

var namer = '张三'
function foo() {
    console.log('hello, ' + namer)
}

console.log(window.namer);  // 张三
window.foo();

像alert()、prompt()等对话框都属于window对象方法，只是在调用的时候可以省略 window

window.alert('123');

window下还有一个特殊属性 window.name

2、`window`对象的常见事件

2.1 窗口加载事件

window.onload = function() {}

window.onload 窗口（页面）加载事件，当文件内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就会调用的处理函数

<body>
    <button>按钮</button>
    <script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('123');
            })
        }
    </script>
</body>

注意：

有了 window.onload 就可以把js代码写到页面元素的上方，因为 onload 是等页面内容全部加载完成之后，再去执行处理函数
window.onload 这种注册方式只能写一次，如果有多个，会以最后一个 window.onload 为准
但是，如果使用 addEventListener 则没有限制

window.addEventListener('load', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('123');
    })
})

`DOMContentLoaded` 事件

document.addEventListener('DOMContentLoaded', function() {})

DOMContextLoaded 事件触发时，仅当DOM 加载完成，不包括样式表、图片、flag等等

如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适

DOMContentLoaded 只有IE9以上的才能支持

window.addEventListener('DOMContentLoaded', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert(123);
    })
})

2.2 调整窗口大小事件

window.onresize = function() {}

window.addEventListener('resize', functiuon() {})

window.onresize 是调整窗口大小加载事件，当窗口大小一发生改变就调用的处理函数
我们经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕宽度

// 优先加载页面
window.addEventListener('load', function() {
    var div = document.querySelector('div');
    // 调整窗口
    window.addEventListener('resize', function() {
        console.log(window.innerWidth);  // 打印窗口尺寸
        console.log('变化');
        // 窗口小于800 隐藏div
        if (window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
})

3、定时器

window 对象给我们提供了2个非常好用的方法 --- 定时器

setTimeout()：延时定时器，延迟一段时间之后执行
setInterval()：间隔定时器，每间隔一段时间执行一次

3.1 `setTimeout` 定时器

window.setTimeout(调用函数, 延迟时间);

这个 window 在调用的时候可以省略
这个延时事件单位是毫秒 但是可以省略，省略默认是0
这个调用函数可以直接写，也可以写函数名，外部调用
我们的页面可能会很多的定时器，我们可以给定时器加上标识符（名字）

我们可以使用 clearTimeout() 来清除定时器

window.clearTimeout('定时器名')

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器
window 可以省略

栗子：

<button>清除定时器</button>

添加定时器

// 1、2000ms 即2秒后输出
var time1 = setTimeout(function() {
    console.log('时间到了');
}, 2000);

// 2、外部调用，有两种方式,第二种有点像字符串，需要加上()
// setTimeout(func, 2000);
setTimeout('func()', 2000);  // 不推荐

function func() {
    console.log('爆炸了');
}

清除定时器：

// 点击按钮 终止定时器
btn.addEventListener('click', function() {
    clearTimeout(timer);
})

3.2 `setInterval()` 定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔一段时间，就取调用一次这个回调函数

注意：

window 可以省略
这个回调函数可以直接写函数，也可以写函数名调用，或者采取字符串 ‘函数名()’ 三种形式
间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少时间就自动启动这个函数
我们也同样可以给这个定时器赋值一个标识符

我们可以使用 clearInterval() 来清除定时器

window.clearInterval('定时器名');

clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器
window 同样可以省略

栗子：

<button class="start">开始</button>
<button class="end">停止</button>

var start = document.querySelector('.start');
var stop = document.querySelector('.end');
var timer = null; // 定义一个全局变量timer, 给它赋值一个空对象，这样结束函数就可以调用timer了

// 点击开始
start.addEventListener('click', function() {
    timer = setInterval(function() {
        console.log('你好吗!');
    }, 1000);
})

// 点击结束
stop.addEventListener('click', function() {
    clearInterval(timer);
})

在定时器中，this指向的调用它的对象，如：上面定时器中的this指向调用它的按钮

4、三大对象

4.1 `location`对象

window对象为我们提供了一个location属性用于获取或设置URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们把这个属性称为 location对象

了解一下url

url：唯一资源定位符

互联网上的每一个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么出处理它

urls一般语法格式：

protocol://host[:port]/path/[?query]#frahment

https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196?fr=aladdin

组成	说明
`protocol`	通信协议常用的`http`、`ftp`、`maito` 等
`host`	主机（域名）baike.baidu.com
`port`	端口号（可省略），省略时使用方案的默认端口号如 http的默认端口号为80
`path`	路径由 0 或多个 / 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
`query`	参数以键值对的形式，通过 `&` 符号分隔开来
`fragment`	片段 # 后面内容常见于链接锚点

1、`location` 对象属性

`location` 对象属性	返回值
`location.href`	获取或者设置整个URL
`location.host`	返回主机名（域名） www.baidu.com
`location.port`	返回端口号如果未写返回空字符串
`location.pathname`	返回路径
`location.search`	返回参数
`location.hash`	返回片段 #后面内容常见于链接、锚点

3秒后跳转到另外一个页面

let div = document.querySelector('div')
timer = 3
setInterval(function() {
    if (timer === 0) {
        location.href = 'https://www.baidu.com'
    } else {
        div.innerHTML = '您将在' + timer + 's后跳转到百度首页'
        timer--;
    }
}, 1000)

2、`location` 对象的方法

`location` 对象方法	返回值
`location.assign()`	跟 `href` 一样，可以跳转页面（也称为重定向页面）
`location.replace()`	替换当前页面，因为不记录历史，所有不能后退
`location.reload()`	重新加载页面，相当于刷新按钮或者 `f5` 如果参数为`true`，表示强制刷新 `Ctrl + f5`

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    // location.assign('http://www.baidu.com');  // 跳转
    // location.replace('http://www.baidu.com');  // 替换
    location.reload();  // 重新加载
})

4.2 `navigator`对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们常用的就是 userAgent，该属性可以返回由客户机发送给服务器的 user-agent 头部的值

下面代码可以判断用户是用哪个终端打开页面，实现跳转

if ((navigator.userAgent.match (/ (phone | pad | pod | iPhone | iPod | ios | iPad | Android | Mobile | BlackBerry | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebosISymbian | Windows Phone)/i))) {
	location.href =””;   // 手机
} else {
	location.href =”";  // 电脑

4.3 `history`对象

window对象提供了一个 history对象，与浏览器历史记录进行交互，该对象包含用户访问过的url

`history` 对象方法	作用
`back()`	可以后退功能
`forward()`	前进功能
`go(参数)`	前进后退功能参数如果是1，前进一个页面；参数如果是-1，后退一个页面

<a href="index.html">index</a> <button>前进</button>

let btn = document.querySelector('button')
btn.addEventListener('click', function() {
    // history.forward();  // 前进
    history.go(1);
})

初识BOM

1、BOM概述

1.1 什么是BOM

1.2 BOM的构成

2、window对象的常见事件

2.1 窗口加载事件

DOMContentLoaded 事件

2.2 调整窗口大小事件

3、定时器

3.1 setTimeout 定时器

3.2 setInterval() 定时器

4、三大对象

4.1 location对象

1、location 对象属性

2、location 对象的方法

4.2 navigator对象

4.3 history对象