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

# 选中Element的方式     1、getElementById()      2、getElementsByClassName()     3、getElementsByTagName()  ...
# 选中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();
 
​       })
  • 发表于 2020-03-03 11:24
  • 阅读 ( 87 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除