1、DOM和BOM
DOM：
1、文档对象模型 2、是web的接口 3、通过DOM接口可以改变网页的内容、结构和样式
BOM：
是浏览器对象模型，与浏览器窗口进行交互的对象，比如前进后退，滚动条等
但是BOM没有标准；JS的标准：ECMA；DOM标准：W3C
2、事件流
包括三个阶段：事件捕获、到达事件和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件
3、DOM事件模型
事件模型有两种：事件捕获和事件冒泡
事件冒泡
事件冒泡表示从最具体的元素（文档中最深的节点）开始触发，然后向上传播至没有那么具体的元素
1、onclick()和attachEvent()只能到冒泡阶段
2、addEventListener()第三个参数为true，则为事件捕获，为false，则为事件冒泡
3、有些事件没有冒泡，如onblur()，onfocus()等
事件捕获
事件捕获表示最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件
如何阻止事件冒泡
1、w3c方法：使用event.stopPropagation()，用于立即阻止事件流在DOM结构中传播，取消后续的事件捕获或冒泡
let btn = document.getElementById("mybtn")
btn.onclick = function (event) {
console.log("Clicked");
event.stopPropagation();
}
document.body.onclick = function (event) {
console.log("body clicked");
}
如果这个例子不调用stopPropagation()，那么点击按钮就会打印两条消息，但这里由于click事件不会传播到document.body，因此onclick事件处理程序永远不会执行
2、IE方法：使用event.cancelBubble = true，用于阻止事件冒泡
let btn = document.getElementById("mybtn")
btn.onclick = function (event) {
console.log("Clicked");
window.event.cancelBubble = true;
}
document.body.onclick = function (event) {
console.log("body clicked");
}
事件执行过程
就是事件冒泡和事件捕获的过程
4、事件委托（事件代理）
不是给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置的每个子节点，这样子节点的事件会向上冒泡，最终都会由事件监听器来处理
//不给li注册点击事件，而给ul注册点击事件
ul.onclick = function (e){
console.log(e.target.innerText);
}
当点击列表项时，事件会冒泡到ul元素，然后通过检查e.target.innerText,来判断我们点击的是列表项中的哪一个元素
5、location对象
用于获取或设置窗体的URL，解析URL
如location.search返回从问号开始直到URL末尾的所有内容
location.href获取当前页面的完整URL
6、添加、移除、移动、复制、创建和查找DOM节点
1、创建DOM节点：createElement()
2、添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore()
3、查找
//返回结果为HTML集合
getElementsByTagName('div') //通过标签名称
//返回一个节点对象
getElementById('btn') //通过元素 Id，唯一性
//返回带有相同类名的所有元素
getElementsByClassName('box')
//返回一个节点对象
querySelector('.box')
querySelector('#btn')
//会将符合条件的元素封装到一个数组中返回
querySelectorAll('.box')
