Js-web-Api ----操作节点

目录

这篇是关于节点操作的内容

1. 查找结点(元素节点的查找方式)

    1. 通过关系查（parentNode）          父子节点

2. 通过父亲找儿子   +  找自己兄弟的方法 》 如下js代码

2. 增加节点                

3. 克隆节点

4. 删除节点                removeChild()

---

这篇是关于节点操作的内容

Dom 节点 ： 元素节点 （div  a   p 等标签） 属性节点 （href   id  class） 文本节点（div里面的字）

1. 查找结点(元素节点的查找方式)

    1. 通过关系查（parentNode）          父子节点

• <div class="yeye">
          <div class="baba">
              <div class="erzi"></div>
          </div>
  </div>

  const erZi = document.querySelector('.erzi')
      console.log(erZi)
      console.log(erZi.parentNode)
      console.log(erZi.parentNode.parentNode)

  2. 通过父亲找儿子   +  找自己兄弟的方法 》 如下js代码

    <ul>
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li></li>
        <li></li>
    </ul>

    <script>
        // 获取到父亲 ul
        const ul = document.querySelector('ul')

        // 查找孩子有两种  第一种  childNodes  这种  （文本空格换行都会获取到 不建议  不经常使用）
        // console.log(ul.childNodes);
        
        
        //查找孩子第二种  children  (仅仅获得所有孩子的元素节点  返回的是一个伪数组)
        console.log(ul.children); 


        // 获取到第二个li
        const li2 = document.querySelector('ul li:nth-child(2)')
        // 找到li的上一个兄弟 1
        console.log(li2.previousElementSibling)
        // 找到li2的下一个兄的
        console.log(li2.nextElementSibling)
    </script>

 previousElementSibling   上一个兄弟

nextElementSibling        下一个兄弟

children        孩子的元素节点

2. 增加节点                

• insertBefore(添加的元素，在第几个li前面添加)                

• appendChild（节点）   在元素最后一个后面添加

    <ul>
        <li>
            <p>1</p>
        </li>
        <li></li>
        <li></li>
    </ul>

        // 增加节点
        // 1. 获取到ul   （上面已经获取了）
        const ul = document.querySelector('ul')
        // 2.创建一个节点
        const li = document.createElement('li')

        // 给 ul 里面添加节点

            // li.innerHTML = '我是appendChild'    appendChild（节点）
            // // 1.在元素的最后li里面添加
            // ul.appendChild(li)

            // 2.在元素第一个前面添加 li   insertBefore(添加的元素，在第几个li前面添加)
            li.innerHTML = '我是在li第一个元素添加li'
            ul.insertBefore(li,ul.children[0])

3. 克隆节点

        // 克隆节点

        /*  第一步： 获取到ul

            第二步： 把ul里面的第一个li孩子 克隆  cloneNode(true|false)

            第三步： 把克隆的孩子追加在ul里面

        */

    <ul>
        <li>
            <p>1</p>
        </li>
        <li></li>
        <li></li>
    </ul>

//        1. 获取到父亲 ul
        const ul = document.querySelector('ul')

//        2. 克隆   要克隆的元素.cloneNode(true)    
//       这里的true的意思是  把孩子里面的所有内容都复制过来，false相反

        const li1 = ul.children[0].cloneNode(true)

 //       3. 追加
        ul.appendChild(li1)


     // 以上有简写方式
        ul.appendChild(ul.children[0].cloneNode(true))

4. 删除节点                removeChild()

    <ul>
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
    </ul>

         /*  1. 获取到ul （父亲）
             2. 删除ul 里面的其中一个孩子
        */

        const ul = document.querySelector('ul')
        ul.removeChild(ul.children[0])