DOM节点操作

最新推荐文章于 2025-08-22 11:32:18 发布

原创最新推荐文章于 2025-08-22 11:32:18 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

WEBAPI 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用DOM API进行节点的查找、增加、复制与删除操作。涵盖了父节点、子节点及兄弟节点的查找方法，以及如何创建新节点并将其添加到文档中。此外，还介绍了如何复制现有节点和删除文档中的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查找节点

// 🏆父节点查找

// parentNode 属性

// 使用:子元素.parentNode

// 返回的最近的父节点

// 找爸爸

        // let son = document.querySelector('.son')

        // console.log(son.parentNode);

        // son.parentNode.style.display = "none"

🏆查找子节点

// childNodes

// 获得所有子节点、包括文本节点（空格、换行）、注释节点等

// let ul = document.querySelector("ul")

// console.log(ul.childNodes);

// children

// 仅获得所有元素节点

// 返回的还是一个伪数组

🏆兄弟节点

// nextElementSibling下一个兄弟

console.log(two.nextElementSibling);

// previousElementSibling上一个兄弟

console.log(two.previousElementSibling);

增加节点

// 🏆创建节点方法

// 方法:document.createElement('标签名')

        let div = document.createElement('div')
        div.innerHTML = '我是新创建的'
        console.log(div);

🏆追加节点

// 父元素.appendChild(子元素)//往后添加

// 父元素.insertBefore(子元素,放到那个元素的前面)//往前添加

🏆复制节点

// 元素.cloneNode(布尔值)

// 若为true包含后代节点

// 若为false 则代表不包含后代节点

// 默认false

删除节点

// 删除元素

// 语法父元素.removeChild(子元素)

// 获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
 
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
    </ul>
    <script>

        // 删除元素
        // 语法   父元素.removeChild(子元素)
        // 获取元素
        //需求：鼠标点击哪个1i就将当前的1i删除
        //1.获取到所有的1i标签
        //2.给每一个1i注册点击事件
        //3.删除被点击的1i
        let btn = document.querySelector("button")
        let ul = document.querySelector("ul")
        let li = document.querySelectorAll("li")

        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function () {
                this.remove()//去掉自己
                // ul.remove(this)//通过父亲去掉自己
            })

        }
    </script>
</body>

</html>

点那个删哪个,我点了第二个所以第二个没了