常见DOM操作笔记汇总!过于简洁,小白勿入~

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