常见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();
})