1 BOM
Browser Object Model：浏览器对象模型，是浏览器为JS提供的能对浏览器进行相关操作的API。以下介绍BOM对象及其属性、方法
1.1 window
① 弹框
// 警告框 方法返回 undefined
alert('警告内容！');
// 确认框 方法返回布尔值
confirm('你确定吗？');
// 输入框 方法返回用户输入的内容
prompt('请输入：');
② 打开/关闭窗口
// 打开新窗口 空的新窗口
window.open();
// 打开新窗口 指定页面地址
window.open('网址')
// 在指定窗口打开指定页面
window.open('网址', '窗口名字');
// 打开新窗口，指定窗口的大小
window.open('网址', '', 'width=600,height=400');
// 关闭本窗口 本页面打开了多个或者页面是用open打开的，才可以生效
window.close();
// 调用打印预览
window.print();
③ 页面滚动
// 滚动到指定位置
window.scrollTo(x, y);
// 滚动到指定位置 带效果
window.scrollTo({
left: x,
top: y,
behavior: 'smooth'
});
// 滚动指定的距离
window.scrollBy(x, y);
// 滚动指定距离 带效果
window.scrollBy({
left: x,
top: y,
behavior: 'smooth'
});
④ 定时器
多次定时：
开启定时器：
setInterval(回调函数，时间间隔);
关闭定时器：
clearInterval(定时器标记);
1. 每隔一秒输出一个随机数：
// 开启定时器 指定匿名函数作为回调函数
setInterval(function() {
console.log(Math.random());
}, 1000);
2. 每隔0.1秒页面背景变为一个随机颜色：
// 开启定时器 指定有名字的函数作为回调函数
setInterval(setBg, 100);
function setBg() {
// 取三个随机数，范围 0 ~ 255
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
// 设置页面的背景色
document.body.style.background = 'rgb('+r+','+g+','+b+')';
}
3. 倒计时
// setInterval 的返回值是该定时器的标记，标记是一个数字，记录这是第几个页面中的第几个定时器
// 到达一定的条件，停止定时器
var intervalId = setInterval(function() {
n --;
box.innerHTML = n;
// 如果 n 的值变为 0，停止定时器
if (n <= 0) {
clearInterval(intervalId);
}
}, 1000);
单次定时：只调用一次回调函数，常用于延迟执行。
// 开启单次定时器
setTimeout(function() {
console.log('啊，我终于执行了');
}, 2000);
// 单次定时 返回定时器标记
var timeoutId = setTimeout(runTime, 3000);
function runTime() {
console.log('runTime 执行了');
}
// 取消单次定时
claerTimeout(timeoutId);
⑤ window 对象属性和方法总结
name 设置或获取本窗口的名字
history
location
navigator
screen 以上四个BOM对象也是window对象的属性
document 该DOM对象也是window对象的属性
window.innerWidth 获取视口的宽度
window.innerHeight 获取视口的高度
alert() 警告框
confirm() 确认框
prompt() 输入框
window.open() 打开新窗口
window.close() 关闭本窗口
window.print() 调用打印接口
window.scrollTO() 滚动到指定位置
window.scrollBy() 滚动指定的距离
setInterval() 开启多次定时
clearInterval() 结束指定的多次定时
setTimeout() 开启单次定时
clearTimeout() 结束指定的单次定时
1.2 history
用来表示本窗口的历史记录。
属性：
length 获取本窗口历史记录的个数
方法：
back() 跳转到上一步（历史记录中的上一个）
fowward() 跳转到下一步（历史记录中的下一个）
go(n) 跳转n步， 正数是下n步，负数上n步
1.3 location
属性：
href 设置或获取完整的url
protocol 设置或获取URL中的协议部分
hostname 设置或获取URL中的主机名部分
port 设置或获取URL中的端口部分
host 设置或获取URL中的主机名+端口号
pathname 设置或获取URL中文件路径部分
search 设置或获取URL中的搜索字符串
hash 设置或获取URL中的锚点部分
方法：
repoad() 重新加载，可实现页面刷新
assign() 跳转页面（history.length + 1，按上一步可退回原网页）
replace() 跳转页面，在本窗口历史记录中删除原网页（history.length不变，按上一步不可退回原网页）
1.4 navigator
属性：
userAgent 获取浏览器的版本信息
1.5 screen
属性：
width 获取屏幕的宽度
height 获取屏幕的高度
2 DOM
<font color="red">MDN 文档对象模型手册</font>：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
Document Object Model，文档对象模型，是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
2.1 Node 节点
有无数个DOM对象，根据文档中节点类型不同，可将所有的DOM对象分为5大类，对应5种节点，分别为：文档节点 document、元素节点 element、属性节点 attribute、文本节点 text、注释节点 comment。文档中的每个部分都是节点，不是节点则不是DOM对象。
2.2 节点的属性
每个节点都有 nodeName、nodeValue、nodeType 属性
元素节点 nodeType:1, nodeName 获取元素的标签名
属性节点 nodeType:2
文本节点 nodeType:3
注释节点 nodeType:8
文档节点 nodeType:9
2.3 获取元素
其实不用获取其他节点，因为可通过获取元素节点即可访问和修改其他类型的节点。
① 通过 ID 名
document.getElementById('ID名'); //若有同名ID则获取第一个元素，若找不到元素则返回null
② 通过标签名
//返回一个集合（HTMLCollection类型的类数组对象），若没有满足条件的元素，则返回空的集合。
//从整个文档中获取
document.getElementByTagName('标签名');
//从某元素的后代元素中获取
element.getElementByTagName('标签名');
③ 通过类名（IE9以上浏览器支持）
//返回一个集合（HTMLCollection类型的类数组对象），若没有满足条件的元素，则返回空的集合。
//从整个文档中获取
document.getElementByClassName('类名');
//从某元素的后代元素中获取
element.getElementByClassName('类名');
④ 通过 name 属性值
//返回一个集合（Nodelist类型的类数组对象），若没有满足条件的元素，则返回空的集合。
//只有 document 有该方法
document.getElementByName('name属性值');
⑤ 通过CSS选择器（推荐）
// 从整个文档中获取 单个元素（选择第一个满足条件的元素并返回，若没有满足条件的元素则返回null）
document.querySelector('选择器');
// 从整个文档中获取 集合（Nodelist类型的类数组对象，若没有满足条件的元素，则返回空的集合。）
document.querySelectorAll('选择器');
// 从指定元素中获取 单个元素（选择第一个满足条件的元素并返回，若没有满足条件的元素则返回null）
element.querySelector('选择器');
// 从指定元素中获取 集合（Nodelist类型的类数组对象，若没有满足条件的元素，则返回空的集合。）
element.querySelectorAll('选择器');
⑥ 获取所有元素（all 属性）
document.all
