DOM&DOM事件流&BOM

DOM

DOM是文档对象模型，是HTML的编程接口。HTML和DOM是一一对应的关系。
对DOM的操作有增删改查。
查询DOM结点：
法一，通过document上的函数：
document.getElementById(‘idname’)
document.getElementsByTagName(‘标签名’)//返回NodeList 动态的 不可遍历
document.getElementsByClassName(‘类名’)//返回NodeList
法二，通过CSS选择器查询DOM结点：
document.querySelector(‘p’) //返回第一个标签名为p的结点
document.querySelectorAll(‘p’) //返回所有标签名为p的结点的集合(NodeList) 静态的 可用forEach遍历
除了传入标签名，还可以传入类名
法三，通过已获取的结点来获取该元素的父、子、兄弟元素。
let currentNode=document.getElementsByTagName(‘p’)[0];
currentNode.children parentNode nextElementSibling
修改DOM属性和内容：
Element.innerHTML
Element.textContent
Element.setAttribute()
Element.getAttribute()
增加元素到DOM树中：
createElement
ParentElement.appendChild()
删除结点：
Element.remove（）

DOM事件流

事件流也叫事件传播，描述的是页面接收事件的顺序。
当一个HTML触发一个事件时，该事件会在该元素结点和根结点之间的路径传播，分为捕获阶段、目标阶段、冒泡阶段。
捕获阶段：网景。从根节点window到目标节点触发（从高到低）
目标阶段：事件处理程序被调用的顺序是注册的顺序。
冒泡阶段：IE。从目标节点到根节点window。（从低到高）
阻止事件传播（捕获或冒泡）：event.stopPropagation()
监听事件的方式主要有两种：
DOM 0级事件：（事件冒泡）
如Element.οnclick=function(event){}
DOM 2级事件:（默认是事件冒泡，也就是第三个参数为false）
addEventListener(‘click’，function(event){}，[useCapture]) //useCapture为true时，表示事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
实际开发中很少使用事件捕获，事件冒泡更为常用; 有些事件是没有冒泡的。比如：onblur(获得焦点)、onfocus(失去焦点)、onmouseenter、onmouseleave。
事件委托（事件代理）：
“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
优点：节省内存，减少事件注册；可以实现当新增子对象时无需再次对其绑定（动态绑定事件）；

BOM

BOM是浏览器对象模型，是控制浏览器行为的接口。
window.location
window.navigator
window.screen
window.alert window.prompt window.confirm
window.localStorage