webapi(三) -节点_webapi节点是什么意思?-CSDN博客

本文链接：https://blog.csdn.net/qq_41675812/article/details/124157035

这篇博客详细介绍了DOM节点的概念，包括元素节点、属性节点和文本节点。内容涵盖查找节点的方法，如父节点、子节点和兄弟节点的获取，以及如何创建、添加、删除和克隆节点。示例代码展示了在JavaScript中如何实现这些操作，帮助读者理解DOM操作的基本技巧。

摘要由CSDN通过智能技术生成

DOM节点

含义

DOM树中每一个内容都称之为节点
DOM树
请添加图片描述

节点类型

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

节点操作

查找结点

父节点

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

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

子节点

语法： 父元素.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 查找所有的子节点（子节点包含文本节点，注释节点，标签节点）

兄弟节点
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'

增加节点

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

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

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

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

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

// 语法：父元素.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)
            })
        }