js关于dom的获取，属性，dom的增删改查

javascript面试前的总结

获取 Dom
dom的获取，首先要看dom本身什么特点，如果 那你平淡无奇，人海中就不会看到你
id，classname，自身的属性，自定义属性

根据id进行获取dom

<div id="ljl">根据id进行获取dom</div>
let ljl = document.getElementById('ljl')
let ljl = document.querySelect('.ljl')
//可以进行直接进行根据id进行获取

根据classname进行获取

<div class="ljl">根据classname进行获取dom</div>
let ljl = document.getElementByClassName('ljl')
  let ljl = document.querySelect('#ljl')

根据自身属性进行获取
这个又要分为两种，attr和prop，attr针对dom节点自带的属性，如class和title，prop则以dom元素作为对象，在jq中checked，disabaled，selected要使用prop

根据自定义属性获取

<div class="ljl" data-set="ljl">根据classname进行获取dom</div>
let ljl = document.getElementByClassName('ljl')
ljl.dataset.set
//进行获取返回值
ljl.getAttribute('data-set')
//进行设置
ljl.getAttribute('data-set','Yahoo')

根据自身属性

 var aDiv=getElementByAttr('div','data-id','123456');
 //返回data-id为123456的div集合
let ljl = document.querySelect('p[class=“ljl”]')

##对dom的操作
对class类名的操作

//首先获取dom
在没有classList之前，都是通过 getAttribute获取，setAttribute设置属性的，class也是属于dom的
ljl.getAttribute('class')
ljl.setAttribute('class','xyn')
ljl.removeAttribute('class')
//要删除 全删除喽，没有替换所以不是很受欢迎
//直接进行赋值也是可以的
ljl.className="ljl"

dom.classList.add（‘’）
//增加
dom.classList.remove('')
//移除
dom.classList.replace('old','new')
//替换
dom.calssList.contains('lljl')
//判断是否含有这个类名

对内容的操作
分为两种innertext和innerhtml

ljl.innerText = "新增加的" //‘新增加的’
ljl.innerText = "<h1>新增加的</h1>" //‘<h1>新增加的</h1>’

ljl.innerHTML = "新增加的" //‘新增加的’
ljl.innerHTML = "<h1>新增加的</h1>" //‘加粗板的新增加的’可解析html语言

###dom 的增删
dom的增加

  let ljl = document.getElementById('ljl')
  let son = document.querySelector('.son')
//新建的节点使用createelement进行创建
  var dev = document.createElement('span')
  dev.innerText = '我是新增的'
  ljl.appendChild(dev)
  ljl.appendChild = dev
  //父级   后面是添加的本身，目标节点
  ljl.insertBefore(dev,son)

克隆节点

let ljl = document.getElementById('ljl')
let son = document.querySelector('.son')
//克隆的时候，默认是fasle就是浅拷贝，只克隆第一层，true就是深拷贝
var twoson = ljl.cloneNode(true)
console.log(twoson)
ljl.insertBefore(twoson,son)

删除节点
removechild就是删除孩子， 连自己都删除removeNode(true)