常见DOM操作笔记汇总！过于简洁，小白勿入~
# 选中Element的方式
1、getElementById()
2、getElementsByClassName()
3、getElementsByTagName()
4、querySelector() //返回指定选择器的第一个元素
5、querySelectorAll() //返回指定选择器的所有元素
# 元素属性值
1、获取元素属性值
element.属性
element.getAttribute()
2、设置元素属性值
element.属性=‘值’
element.setAttribute('属性'，'值')
3、移除元素属性值
element.removeAttribute('属性')
# 自定义属性值
element.setAttribute('data-index'，'值')
element.getAttribute('data-index'，'值')
# 节点操作
1、父节点
node.parentNode
2、子节点
node.childNodes //所有的子节点，包括元素节点、文本节点等
parentNode.children //获取子元素常用
node.firstElementChild
node.lastElementChild
3、兄弟节点
node.nextSibling
node.previousSibling
node.nextElementSibling
node.previousElementSibling
# 创建、添加、删除、克隆节点
document.createElement('tagName')
node.appendChild(child) //添加到父元素子节点列表末尾，相当于after伪类
node.insertBefore(child,指定元素) //添加到父元素子节点列表前面，相当于before伪类
node.removeChild(child)
node.cloneNode()
# 注册、删除事件
1、传统注册方式(有'on')
element.onclick=function(){}
2、方法监听注册方式（推荐）
eventTarget.addEventListener('click',function(){});
3、传统删除方式(有'on')
eventTarget.onclick=null;
4、方法监听删除方式（推荐）
eventTarget.removeEventListener('click',function(){});
# 事件流
1、捕获阶段：doc->html->body->father->son（从上到下）
冒泡阶段：son->father->body->html->doc（从下往上）
2、e.target和this
e.target返回的是**触发**事件的对象
this返回的是**绑定**事件的对象
3、阻止默认行为
//让链接不跳转
var a=document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefalut();
})
4、阻止事件冒泡
e.stopPropagation();
5、事件委托
原理：把事件监听器设置再其父节点上，然后利用冒泡原理影响设置每个子节点。
var ul=document.querySelector('ul');
ul.addEventListener('click',function(e){
e.target.style.background='red';
})
6、禁止选中文字和禁止右键菜单
document.addEventListener('selectstart',function(e){
e.preventDefalut();
})
document.addEventListener('contextmenu',function(e){
e.preventDefalut();
})
