webapi(三) -节点

DOM节点

含义

DOM树中每一个内容都称之为节点
DOM树

节点类型

1. 元素节点(🔺)
   1. 所有的标签，比如：body , div
2. 属性节点
   1. 所有的属性，比如：href
3. 文本节点
   1. 所有的文本

节点操作

查找结点

1. 父节点

   语法： 子元素.parentNode (这是属性)

// 查找son的父元素
        let son = document.querySelector('.son')
        console.log(son.parentNode) // 找到父亲
        console.log(son.parentNode.parentNode) // 找到爷爷

2. 子节点

   • 语法： 父元素.children 查找所有的子元素（🔺）

      btn.addEventListener('click', function () {
                 // children 查找所有的子元素  
                 // console.log(ul.children) // 得到的是个伪数组
                 // 获取到第一个元素
                 console.log(ul.children[0])
                 // 其他方法
                 // console.log(ul.querySelector('li'))
                 // console.log(ul.querySelectorAll('li')[0])
             })
     

   • 语法： 父元素.childNodes 查找所有的子节点（子节点包含文本节点，注释节点，标签节点）

3. 兄弟节点

   1. 语法： 元素.previousElementSibling 查找上一个兄弟节点
   2. 语法： 元素.nextElementSibling 查找下一个兄弟节点

<button>点击</button>
    <ul>
        <li>第1个</li>
        <li class="two">第2个</li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
    <script>
        // 演示兄弟节点

        let btn = document.querySelector('button')
        let two = document.querySelector('.two')

        btn.addEventListener('click', function () {
            // 上一个兄弟节点   属性
            console.log(two.previousElementSibling)
            // 下一个兄弟节点   属性
            console.log(two.nextElementSibling)
        })
    </script>

创建节点

语法 ： document.createElement(‘标签名’)

let ul = document.querySelector('ul')
        // 创建节点
        // 语法： document.createElement('标签名')
       let newLi =  document.createElement('li')
       newLi.innerHTML = '我是新Li'

增加节点

1. 语法： 父元素.appendChild(要添加的元素)

   1. 作用：将元素放到父元素的里面的最后面

   // li添加到页面ul中
           // 语法：父元素.appendChild(要添加的元素)
           // 作用：将元素放到父元素的里面的最后面
           ul.appendChild(newLi)
   

2. 语法： 父元素.insertBefore(要添加的元素, 在谁前面)

   1. 作用：将节点添加到指定的节点前面

   // 语法：父元素.insertBefore(要添加的元素, 在谁前面)
           // 作用：将节点添加到指定的节点前面  注意：如果第二个参数为null , undefined 时，效果等价于appendChild
           // ul.insertBefore(newLi , null) // 把元素添加到最后
           // 需求：将创建的li添加到第一个li的前面
           ul.insertBefore(newLi , ul.children[0])
   

克隆节点

语法： 元素.cloneNode(布尔值)

• true 会克隆节点自身，后代节点会克隆的 也叫做深克隆
  

• false 默认值 只会克隆节点自身，后代节点不会克隆的 也叫做浅克隆 (默认)
  

let ul = document.querySelector('ul')
        // 语法：元素.cloneNode(布尔值)
        //  参数 布尔值 
        //  true  会克隆节点自身，后代节点会克隆的
        //  false 默认值 只会克隆节点自身，后代节点不会克隆的
        let newLi = ul.cloneNode(true) // 克隆整个ul
        console.log(newLi)
				document.body.appendChild(newLi)

删除节点

语法： 父节点.removeChild(child)

// 需求： 点击li，删除点击的li
        let ul = document.querySelector('ul')
        let lis = document.querySelectorAll('li')

        // 删除节点
        // 语法：父节点.removeChild(child)

        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                // 第一种方法
                ul.removeChild(this)
                // 第二种方法，不需要ul，使用li获得到它的父节点
                // this.parentNode.removeChild(this)
            })
        }