JS节点操作、节点层级获取

dsus ch

已于 2022-08-20 21:34:21 修改

阅读量1.9k

点赞数 25

文章标签： html 前端 javascript css3 css

于 2022-08-20 21:29:37 首次发布

本文链接：https://blog.csdn.net/m0_63953314/article/details/126428548

版权

获取元素方法

DOM提供的方法获取元素，利用标签特性获取元素，如标签名、类名等。
节点层级获取元素，利用节点层级关系：父子、兄弟，优点是逻辑性强。

节点层级获取元素

节点概述

网页中的所有内容都是节点，分为元素节点、属性节点、文本节点（文本节点包含文字、空格、换行等）。
节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点的nodeType为1，属性节点和文本节点依次降低。

父子层级

返回对象集合

parentNode 返回直系父亲，没有返回null（空对象）

childNodes（标准）返回所有子节点的集合

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <script>
        let parent = document.querySelector('.box')
        console.log(parent.childNodes)

        //可以看到返回了所有子节点，但是我们在实际操作中一般对元素节点操作
        //因此可以封装一个返回元素节点的函数,这里给出该函数的主要代码
        let Node_list = []
        for (let i = 0; i < parent.childNodes.length; i++) {
            if (parent.childNodes[i].nodeType === 1) {
                //是元素节点就加入集合
                Node_list.push(parent.childNodes[i])
            }
        }
        console.log(Node_list)
    </script>
</body>

children （非标准）返回所有子元素节点的集合

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <script>
        let parent = document.querySelector('.box')
        let child = parent.children
        console.log(child)
    </script>

练习:下拉菜单

导航及内容存在一个div，由多个div组成菜单。核心思想：鼠标放上显示内容，离开隐藏，内容区是导航的第二个子元素可以用children[1]获取。

/*css代码*/
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px auto;
            width: 240px;
        }

        .nav {
            float: left;
            position: relative;
            width: 80px;
            height: 40px;
            text-align: center;
            background-color: bisque;
            border-radius: 10px;
        }

        .nav>a {
            display: block;
            line-height: 40px;
            text-decoration: none;
            font-size: 17px;
            font-weight: bold;
            color: darkgray;
        }

        .cell {
            display: none;
        }

        .cell>li {
            list-style-type: none;
            height: 28px;
        }

        .nav>a:hover,
        .cell>li:hover {
            background-color: #eee;
        }

        .box {
            display: none;
        }


<!--html代码-->
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <ul>
        <div class="nav">
            <a href="">关注</a>
            <div class="cell">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </div>
        </div>
        <div class="nav">
            <a href="">收藏</a>
            <div class="cell">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </div>
        </div>
        <div class="nav">
            <a href="">历史</a>
            <div class="cell">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </div>
        </div>
    </ul>

//js代码
        //获取元素
        let navs = document.querySelectorAll('.nav')
        //注册事件
        for (let i = 0; i < navs.length; i++) {
            navs[i].onmouseover = function () {
                this.children[1].style.display = 'block'
            }
            navs[i].onmouseout=function(){
                this.children[1].style.display = 'none'
            }
        }

返回单独对象

firstChild 返回第一个子节点，若无返回null

lastChild 返回最后一个节点，若无同上

firstElementChild 返回第一个元素节点，若无同上

lastElementChild 返回最后一个元素节点，若无同上

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <script>
        let parent = document.querySelector('.box')
        console.log(parent.firstChild)
        console.log(parent.lastChild)
        console.log(parent.firstElementChild, parent.firstElementChild.innerHTML)
        console.log(parent.lastElementChild, parent.lastElementChild.innerHTML)
        //考虑到兼容性，在实际开发中可能会这样写
        console.log(parent.children[0])
        console.log(parent.children[parent.children.length - 1])
    </script>
</body>

注意使用firstElementChild或lastElementChild可能存在兼容性问题，解决方案：child属性返回子元素节点对象集合，利用index为0和length-1是数组首位和末尾，来获取首尾元素。

兄弟层级

nextSibling 返回当前元素的下一个兄弟节点，若无返回null

previousSibling 返回当前元素的上一个兄弟节点，若无同上

nextElementSibling 返回当前元素的下一个兄弟元素节点，若无同上

previousElementSibling 返回当前元素的上一个兄弟元素节点，若无同上

<body>
    <div class="xd">第一个</div>
    <div class="xd">第二个</div>
    <div class="xd">第三个</div>
    <div class="xd">第四个</div>
    <script>
        //获取第一个div
        let catchs = document.querySelector('div')
        console.log(catchs)

        //上一个兄弟节点
        console.log(catchs.previousSibling)
        //下一个兄弟节点
        console.log(catchs.nextSibling)
        //上个一个兄弟元素节点
        console.log(catchs.previousElementSibling)
        //下一个兄弟元素节点
        console.log(catchs.nextElementSibling,catchs.nextElementSibling.innerHTML);
    </script>
</body>

节点操作

创建节点

document.createElement('tagName') 动态创建元素节点,注意前缀是文档

添加节点

parents.appendChild(child) 将子元素添加到指定父元素之后,类似于css中的after伪元素

parents.insertBefore(newNode, referenceNode) 将一个节点插入到一个拥有指定父节点的子节点前面

referenceNode为参考节点，即要插入该节点前面
如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾

练习

设置一个盒子，第一个将元素插入父元素之后，第二次将元素插入到之前插入的元素之前。特别的，注意参考元素为空的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1 {
            background-color: beige;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <script>
        //创建节点
        let ele1 = document.createElement('div')
        let ele2 = document.createElement('div')
        let b1 = document.querySelector('.box1')
        //插入节点
        ele1.innerHTML = '第一次插入盒子的一句话'
        ele2.innerHTML = '第二次插入盒子的一句话'
        b1.appendChild(ele1)
        b1.insertBefore(ele2,ele1)
    </script>
</body>
</html>

若referenceNode为null
b1.insertBefore(ele2,null)

删除结点

parents.remove() 删除所有节点

parents.removeChild(child) 删除指定子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=u, initial-scale=1.0">
    <style>
        div {
            background-color: rgba(223, 226, 226, 0.416);
            width: 270px;
            position: absolute;
        }
        ul>li {
            height: 30px;
            text-align: center;
        }
        button {
            position: relative;
            left: 70px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Alabama</li>
            <li>Little Rock</li>
            <li>Delaware</li>
            <li>Iowa</li>
            <li>St. Paul</li>
        </ul>
        <button>删除一项</button>
        <button>删除所有</button>
    </div>
    <script>
        let btns = document.querySelectorAll('button')
        let lis = document.querySelector('ul')
        console.log(btns)
        btns[0].onclick = function () {
            lis.removeChild(lis.firstElementChild)
        }
        btns[1].onclick = function () {
            lis.remove()
            return 
        }
    </script>
</body>
</html>

复制节点

node.cloneNode() 注意参数为空或false进行浅拷贝，只复制节点不复制内容；参数为true进行深拷贝，复制节点和内容。

练习

按下表格的复制按钮，在剪切板上出现对应行的姓名，需要进行深拷贝和追加元素。

<!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">
    <style>
        table {
            text-align: center;
            width: 300px;
            margin: 100px auto;
        }
        thead {
            background-color: cornflowerblue;
            font-size: 16;
            font-weight: bold;
        }
        tbody td {
            border-bottom: 2px solid wheat;
        }
        .btn {
            border: 0;
        }
        .btn:hover {
            background-color: #eee;
        }
        div {
            background-color: rgb(199, 248, 248);
            width: 300px;
            height: 200px;
            margin: -90px auto;
            text-align: center;
        }
        div span {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>喜羊羊</td>
                <td>男</td>
                <td class="btn">复制</td>
            </tr>
            <tr>
                <td>2</td>
                <td>奥特曼</td>
                <td>未知</td>
                <td class="btn">复制</td>
            </tr>
            <tr>
                <td>3</td>
                <td>超人</td>
                <td>男</td>
                <td class="btn">复制</td>
            </tr>
        </tbody>
    </table>
    <div>
        <span>剪贴板</span>
    </div>
    <script>
        let btns = document.querySelectorAll('.btn')
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //按钮的前第二个兄弟是我们需要复制的内容
                let node = this.previousElementSibling.previousElementSibling.cloneNode(true)
                //复制到剪贴板
                document.querySelector('div').append(node)
                //换行
                let br = document.createElement('br')
                node.parentNode.appendChild(br)
            }
        }
    </script>
</body>
</html>