BOM
BOM介绍
概念：
BOM是三个单词组成Bowser Object Model，即浏览器对象
BOM的意思就是通过对象组成的结构来操作浏览器的
浏览器历史记录
历史记录的操作是window的子对象history，可以操作页面的前进后退
语法
history .back（） 后退到上一个页面
history .go（） 前进多个页面
history .forward 前进下一个页面
浏览器的地址栏信息
浏览器地址栏的操作，window对象交给自己的子对象location对象去处理
语法
location .hash 设置从
location .href 设置完整的url
location .search 设置返回url的参数部分
浏览器的弹出层
location .assign（要跳转的地址）
location .prompt（）
location .confrim（）
浏览器窗口尺寸
window.innerwidth 浏览器的窗口宽度
window.innerheigth 浏览器的窗口高度
这两个属性返回的单位是像素
这两个属性计算的范围包含滚动条的区域
浏览器事件
onload事件：当网页中所有资源加载完毕后才执行的事件
语法
window.onload=function（）{
操作
}
使用说明：通常是将script标签放到head标签中的时候使用，因为放在head标签中默认是获取不到body中的内容的，但是有了这个事件，就可以了
onscroll 滚动事件：当网页滚动条位置发生变化的时候触发这个事件
window.onscroll=function（）{
操作
}
使用说明：必须要有滚动条才行
浏览器窗口改变事件：resize
window.onresize=function（）{
操作
}
定时器
延迟执行：
var timerid =setTimeout（function（）{
代码段
}）
使用说明：第一个参数是要执行的函数，第二个参数是延迟时间，返回一个数字，表示当前页面的第几个定时器
var timerId = setInterval(function () {
console.log('我执行了')
}, 10
使用说明：第一个参数是要执行的函数，第二个参数是间隔时间，返回一个数字，表示当前页面的第几个定时器
定时器返回的是数字，就是用来关闭定时器的
clearTimeout（）
clearInterval（）
使用说明：其实这两个方法可以混用
异步操作
js的线程，会先将所有同步代码执行完，与此同时，浏览器也在处理异步代码(例如正在等待时间)，当浏览器中的异步代码到了应该执行的时候了，会将需要执行的异步代码放在一个队列中，进行排队等候；当js线程将所有同步代码执行结束后，会从队列中拿出第一个需要执行的代码去执行，执行过一个以后，再次到队列中拿出第二个需要执行的代码去执行。。。。
窗口控制
打开新的窗口
语法
window。open（url，窗口名称，窗口风格）
参数说明
如果url为空，会打开一个空的标签页，url不为空就打开目标url页面
窗口名称就是一个字符串
窗口风格：
height：窗口高度，数字，不能小于100
width：窗口高度，数字，不能小于100
left：窗口左边距离，数字
top：窗口上边距离，数字
关闭窗口
window.close（）
设置窗口浮动
语法
window.srollTo（x，y）
DOM
DOM介绍
DOM的全拼是：Document Object Model，叫做文档对象模型。
DOM中的顶级对象是document，言外之意，DOM其实是属于BOM的。
html基本操作
document.body.tbody比较常用，并且在页面上是唯一的，因此可以使用document.body直接获取
document.documentElement : 可以获取html元素及其所有内容
document.head : 可以直接获取head元素
document.title : 可以直接获取title的文本
获取元素
在js中，标签的id名，可以直接当作是变量，直接就能代表这个标签元素，但是id名可以随便定义，但是变量名不能随便定义，所以使用id名代表标签是有风险的
通过document获取节点
document.getElementById("标签id名");
document.getElementsByTagName("标签名");
document.getElementsByClassName("标签类名");
document.getElementsByName("标签的name属性的值"); 通过标签的name属性获取标签
上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）
使用css选择器来获取元素：
documen.querySelector(css选择器);
documen.querySelectorAll(css选择器);
内容操作
语法
元素.innerHTML可以解析标签
元素.innerText 不可以解析标签
样式操作
设置样式
语法
元素.style。css属性名=css属性值
获取样式
语法
window.getcomputedstyle（标签）
返回所有样式键对组成对象
元素类名
使用元素的classname属性可以设置元素的类名，也可以获取类名
var div = document.querySelector('div')
div.className = 'test'
添加类名：语法 类名列表.add（类名）
var box = document.querySelector(".box")
获取标签类名列表
var list = box.classList
console.log(list)
获取按钮
var btn = document.querySelector("button")
给按钮绑定单击事件
btn.onclick = function(){
给类名列表中添加一个类名
list.add('border')
}
删除类名，语法：类名列表.remove
btn.onclick = function(){
// 将green从类名列表中删除
list.remove('green')
console.log(box.classList)
}
让类名在删除和添加之间切换，语法：类名列表.toggle（类名）
btn.onclick = function(){
// 让green类名在删除和点击之间切换
list.toggle('green')
}
判断类名列表是否包含在指定类名：类名列表.contains（类名）
list.contains（）
属性操作
标签属性
元素.setAttribute(属性名,属性值)
元素.getAttribute(属性名);
元素.removeAttribute(属性名);
对象属性
元素.属性名=值
console.log（元素，属性名）
页面卷去的距离
语法
没有文档声明
document.documentElement.scrollTop
有文档声明获取方式
document.body.scollTop
兼容写法
var t=document.documentElement.scrollTop || document.body.scrollTop
短路运算
利用逻辑运算中的&&和||让赋值操作变化更灵活，并带有选择性
var 变量 = 数据1&&数据2
当数据为true，不能决定整个条件的结果，还需要进行到数据2，所以此时会将数据2赋值给变量
当数据1为false，就已经知道整个条件的结果了，就没有必要进行到数据2了，所以此时会将数据1赋值给变量
var 变量 = 数据1 || 数据2
节点操作
DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。
DOM节点分三种：元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。
