WebAip---（节点）

     节点介绍：

1、一个页面(DOM树）只由标签组成：不严谨的

2、页面（DOM树）主要由节点（Node）组成：

一切内容皆节点

元素节点（标签）

属性节点

文本节点

注释节点

3、实际开发中是用户最多的是：元素节点

查找结点子节点：

1、子节点（了解）：父元素  .childNodes

2/子元素节点：父元素 .children

let li = document.querySelector('ul>li')

      //1.子节点 : 包含标签、文本、注释
      console.log(ul.childNodes)//13个  两个标签之间的空格也算空文本节点

      //2.子元素节点： 只会获取元素节点
      console.log( ul.children)//5个li元素

查找结点的父节点 ： 

1.子元素节点 ：  父元素.children

      2.查找兄弟节点 :

         (1)获取上一个元素节点 : 元素.previousElementSibling

         (2)获取下一个元素节点 : 元素.nextElementSibling

      3.查找父节点 : 元素.parentNode

let li2 = document.querySelector('#li2')

      console.log(li2.parentNode);//ul
      console.log(li2.parentNode.parentNode)//body
      console.log(li2.parentNode.parentNode.parentNode)//html
      console.log(li2.parentNode.parentNode.parentNode.parentNode)//document
      console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null

查找兄弟节点：

1、子元素节点： 父元素.childer

2.查找兄弟节点：

（1）获取上一个元素节点：元素.previousElementSiblings

(2)获取下一个元素节点：元素.nextElementSiblings

let li2 = document.querySelector('#li2')
      document.querySelector('.btn').onclick = function () {
        console.log(li2.previousElementSibling)
        console.log(li2.nextElementSibling)
        li2.previousElementSibling.style.color = 'yellow'
        li2.nextElementSibling.style.color = 'red'
      }

 新增节点：

1创建空标签：let li =document.createElement('标签名')

2设置节点内容

3追加到页面：

（1）追加到后面： 父元素.appendChild(子元素)

（2）追加指定元素前面： 父元素.insertBefore(子元素，要加到哪个元素前面)

*DOM中没有追加到后面的方法。因为insertBefore可以实现追加到任意位置

 //1.在内存中创建空标签
      //参数传 '标签名'
      let li =  document.createElement('标签名')
      //2.设置内容
      li.innerText = '我是新创建的li元素'
      console.log(li)
      //3.追加到页面   （默认创建元素只是在内存中，不会添加到DOM树，所以渲染引擎不渲染）
      let ul = document.querySelector('父元素')//获取父元素
      //3.1 追加到最后面    父元素.appendChild(子元素)
      // ul.appendChild(li)//追加到ul中
      //3.2 追加到指定位置  父元素.insertBefore(子元素,要加到哪个元素的前面)
      let li2 = document.querySelector('#li2')//班长2
      ul.insertBefore(li, li2 )//li 追加到 li2的前面

 克隆节点：

克隆节点=复制节点

元素.cloneNode(布尔类型)

      false:不克隆后代元素

        true：克隆所有后代

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

       document.querySelector('.btn').onclick = function(){
            let cloneBox = box.cloneNode(true)
            //追加到body
            document.body.appendChild(cloneBox)

 删除节点

节点操作：

1查询子元素节点：父元素.children

2.查找兄弟节点：

（1）获取上一个元素节点：元素.previousElementSibling

(2)获取下一个元素节点：元素.nextElementSibling

3查找父节点：元素.parentNode

4.新增节点

5删除节点：父元素.removeChild(子元素)

*注意是父元素调用，删除子元素

 let ul = document.querySelector('ul')
      let li2 = document.querySelector('#li2')

      document.querySelector('.btn').onclick = function () {
        //父元素.removeChild(子元素)
        ul.removeChild(li2)
      }

总结：

1.子元素节点 ：  父元素.children

      2.查找兄弟节点 :

         (1)获取上一个元素节点 : 元素.previousElementSibling

         (2)获取下一个元素节点 : 元素.nextElementSibling

      3.查找父节点 : 元素.parentNode