api - DOM 节点

节点类型

查找子节点：childNodes、children、firstChild、lastChild

let erweima = document.querySelector('.erweima')

childNodes:查找所有子节点，包含元素，文本，注释，回车等
  erweima.childNodes         //输出结果为7
  <div class="erweima">      //回车一个节点
      abc                    
      <span>aaa</span>       //span标签一个节点   回车一个节点
      <img src="images/code.png" alt="" />       //img标签一个节点   回车一个节点
      <span>X3</span>        //span标签一个节点   回车一个节点
  </div>
  
  
children:只查找元素节点，不包含文本和注释：后期我们只关注元素节点，所以children更常用
重点细节：不能使用forEach,所以它的遍历使用for
erweima.children
  
erweima.firstChild  ： 查找第一个元素节点  
erweima.lastChild  ：  查找最后一个元素节点

查找父节点：parentNode

    子元素.parentNode
      查找最近的父级元素，返回是dom元素

查找兄弟节点：nextElementSibling、previousElementSibling

元素.nextElementSibling  ：  查找下一个兄弟元素
元素.nextSibling  ：  查找下一个兄弟节点：不止元素，可以文本等

元素.previousElementSibling  ：  查找上一个兄弟元素
元素.previousSibling  ：  查找上一个兄弟节点：不止元素，可以文本等

创建元素：createElement

创建一个p标签，用变量来接收p标签
let pp = document.createElement('p')
创建的p标签可以直接设置内容和样式等
pp.innerText = '这是内容'   //设置p标签里面的内容
p.style.color = 'red'      //设置文字颜色为红色

节点的增加：appendChild、insertBefore

    // 将创建的p元素追加到box的子元素的最后 --- 父子关系
    box.appendChild(p)
    
    将创建的p元素追加到box的子元素的最前面 --- 父子关系
    box.insertBefore(你想插入的子元素,位置参照)
    box.insertBefore(p, box.children[0])   //这个可以应用在插入最前面或者插入到空的标签里面

节点的复制：cloneNode

// 元素.cloneNode():可以将指定的元素复制一份
元素.cloneNode(Boolean)      //复制该元素节点  true是深拷贝，把结构等都拷贝过去，false是浅拷贝（默认），只拷贝文本内容等

second.appendChild(originP.cloneNode(true))   //通过元素追加的方法来添加进去

节点的删除：

父元素.removeChild(直接子元素)
例：  tbody.removeChild(ele.parentNode.parentNode)   //删除ele的父元素的父元素

元素.remove()  删除元素本身
例：  ele.parentNode.parentNode.remove()             //ele的父元素的父元素直接删除