DOM
文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
获取元素的方法：
1.根据id名获取
getElementById('id名')； console.dir打印返回元素对象，以及里面的属性和方法
2.根据标签名获取
getElementsByTagName(‘div’)；返回的是获取过来的元素的集合，以伪数组的形式储存的
如果页面只有一个div，返回的还是伪数组的形 式，如果页面中没有这个元素返回空的伪数组
获取父元素内部所有指定标签名的子元素，父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己
HTML5新增的，适用于i9以上和移动端
1.根据类名获取某些元素集合
getElementsByClassName('l类名)；
2.querySelector 返回指定选择器的第一个元素对象
querySelector(.类名或#id名、div)；里面必须加符号如类名要加.号和id要加#号。
3.querySelectorAll()返回指定选择器的所有集合
获取特殊元素(body,html) document.body , document.documentElement//返回html元素对象
事件三要素
执行事件的步骤
1.获取事件源->2.注册事件(绑定事件)->3.添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
禁止鼠标右键菜单：contextmenu
禁止鼠标选中：selectstart
mouseenter和mouseover的区别：
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，因为当鼠标经过子盒子时，向上冒泡获得了父盒子的事件，所以触发，mouseenter只会经过自身盒子会触发，因为他不会冒泡。
跟mouseenter搭配鼠标离开mouseleave同样不会冒泡。
操作元素
改变元素内容：element.innerText :不识别HTML标签，去除空格与换行，非标准
element.HTML ：可以识别HTML的标签，保留空格与换行，W3C标准
这两个属性是可以读写的，获取元素里面的内容
自定义属性值
节点操作
1.父级节点
node.parentNode：属性可以返回某节点的父节点，但是是最近的一个父节点，如果指定的节点没有父节点则返回null
2.子节点
一、parentNode.childNodes -- ul.childNodes--获得ul里面的所有的子节点
二、ul.children获取ul里面的所有子元素节点，非标准但更常用
三、ul.firstChild第一个子节点不管文本节点还是元素节点，最后一个子节点lastChild
四、ul.firstElementChild第一个子元素节点，最后一个lastElementChild，需兼容
五、ul.children[0]--ul的第一个子元素节点，伪数组索引号从零开始，ul.children[ul.children.length-1]ul的最后一个子元素节点
3.兄弟节点
一、nextSibling下一个兄弟节点，包含元素节点或者文本节点
二、previousSibling返回上一个兄弟节点，包含元素节点和文本节点
三、nextElementSibling下一个兄弟元素节点，需兼容性
四、previousElementSibling上一个兄弟元素节点，需兼容性
重点是父节点和子节点
4.创建节点(动态创建节点)
document.createElement('tagName')
document.createElement('li')
添加节点
node.appendChild(child) node父级 child -- 子级,将节点添加到指定父节点的子列表末尾，类似于css里面的after伪元素
var document.querySelector('ul') -- ul.appendChild(li);
node.insertBefore(child,指定子元素) 将节点添加到父元素节点的指定子节点的前面
var lili = document.createElement('li')
ul.insertBefore(lili,ul.children[0])
5.删除节点
node.removeChild(child) ,node 父节点
ul.removeChild(lili)
6.复制节点(克隆节点)
node.cloneNode() -- 返回调用该方法的节点的一个副本。也称克隆节点或拷贝节点。
括号里面为空或者是false，浅拷贝，只复制标签不复制里面的内容；
括号里面为true，深拷贝，复制标签以及里面的内容
7.动态创建元素区别
1.document.write()直接将内容写入页面内容流，但是文档流执行完毕，再调用则它会导致页面重绘
2.document.innerHTML是将内容写在某个DOM节点，不会导致页面全部重绘 ,创建多个元素效率更高(不要拼接字符串，采取数组形式)，结构稍微复杂
3.document.crarteElement()创建多个元素效率稍微低一点点，但是结构更清晰
事件
1.注册事件(绑定事件)
一、传统注册事件:利用on开头的事件如onclick，具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
btn.onclick = function() {
console.log('点击了btn')
}
二、方法监听注册方法:addEventListener()它是一个方法,i9以上；i9以前使用这个attachEvent()，同一个元素同一个事件可以注册多个监听器，按注册事件顺序执行
eventTarget.addEventListener("type",listener[,useCapturel])
type:事件类型字符串，比如click、mouseover，注意这里不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值默认是false
btn.addEventListener("click",function(){
console.log('点击了btn')
})
2.删除事件(解绑事件)
传统：让事件=null
btn.onclick = null
方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture])
3.DOM事件流
事件捕获阶段:从上往下，document——>html——>body——>div
事件冒泡阶段:从下往上，div——>body——>html——>document
4.事件对象
常见事件对象的属性和方法：
1.e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
区别：e.target点击了那个元素，就返回那个元素，this那个元素绑定了这个点击事件，就返回谁
5.事件委托
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
6.鼠标事件对象
7.键盘事件
三个事件的执行顺序 keydown——>keypress——>keyup,如果使用addEventListener不需要加on
keyCode判断返回按下键的ASCII值
