开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情

前言

JS是直接操作DOM元素的，vue、react引入了虚拟DOM的概念，但本质上还是需要去操作更改DOM，框架UI用多了原生操作DOM的方法会逐渐遗忘，但我们还是会碰到UI做不到的一些需求，这时候可能需要去做些DOM操作，今天我们就来看以下DOM元素从创建到删除的方法。

创建

createElement():创建对应标签的节点，参数为标签名称。
createDocumentFragment():创建文档对象，可以以更好地性能进行节点的操作。
createTextNode():创建对应数据的文本节点，参数为文本数据。

操作

appendChild():创建一个新的子节点添加至尾部，该方法可以往已有的元素当中添加新的子节点。

   <div id="box"></div>

    var box = document.getElementById('box')
    var text = document.createTextNode('这是一段话');
    box.appendChild(text);//添加一个text元素

insertBefore():在元素的某个节点前面添加一个字节点，接受两个参数一个是插入的新节点，一个是参考节点，也就是在这个节点前面插入。

   <div id="box">
      <div id="box1">这是box1</div>
    </div>

   var box = document.getElementById('box')
    var box1 = document.getElementById('box1')
    var div = document.createElement('div')
    div.innerHTML = '这是div元素'
    box.insertBefore(div,box1)//在box1前面添加

replaceChild():替换元素中某一个子节点，第一个参数是新的子节点，第二个是就旧的子节点。

   box.replaceChild(div,box1)//用div替换box1

removeChild():删除对应的子节点。

   box.removeChild(box1)//将box1节点删除

属性操作

getAttribute():获取元素中某个属性的属性值，参数为属性名。

   var box1 = document.getElementById('box1');
   console.log(box1.getAttribute('id'));//box1

removeAttribute():移除元素某个属性，参数为属性名。

    .box1{
      width: 100px;
      height: 100px;
      color: red;
    }
    
     <div
        id="box1"
        class="box1"
      >
        这是box1
     </div>

       var box1 = document.getElementById('box1');
    box1.removeAttribute('class')//移除了class样式

hasAttribute():是否有某个属性，参数为属性名，返回布尔值。

    console.log(box1.hasAttribute('class'))//true
    console.log(box1.hasAttribute('style'))//false

setAttribute():设置某个属性，参数为属性名跟对应属性值。

    box1.setAttribute('style','color:pink')

总结

以上就是DOM元素的操作方法，对于这些原生方法我们还是要经常温故而知新，等到我们真正用到的时候才能轻松地完成相关需求。

JS学习——DOM操作方法

前言

创建

操作

属性操作

总结