# 选中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();
? })
常见DOM操作笔记汇总！过于简洁，小白勿入~
原文：https://www.cnblogs.com/isremya/p/12399280.html
