了解js的节点操作，父级节点和子级节点，兄级节点

爬楼梯的小新

已于 2022-01-21 09:48:36 修改

阅读量1.9k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-01-18 18:14:34 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122565009

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

利用dom树可以把节点划分为不同的层级关系常见的是父子兄层级节点

父级节点（重点掌握！）

node.parentNode

node 节点
parentNode属性可返回某节点的父节点但是是返回最近的一个父节点
如果指定的节点没有父节点则返回null

案例：打印sun的父节点

<body>
    <div class="demo">
        <div class="box">
            <div class="sun"></div>
        </div>
    </div>

</body>
<script>
    var sun = document.querySelector('.sun')
    console.log(sun.parentNode);
</script>

子级节点（重点掌握！）

parentNode.children

是一个只读属性返回所有子元素的节点，只返回子元素节点，其余节点不返回

案例：返回ul里的小li

<body>
        <ul>
            <li>dddd</li>
            <li>dddd</li>
            <li>dddd</li>
        </ul>
</body>
<script>
    var ul = document.querySelector('ul');
    console.log(ul.children);
</script>

如果不想要全部的节点，只返回元素的某一个节点，可以这样操作parentNode.children[索引号]

索引号从0开始

案例1：此时这时打印的就是第一个li dddd1

获取最后一个子节点可以写索引号也可以让长度减1 这个好处在于如果后期增加li 但是js里的内容不用改变不用更改索引号

<body>
        <ul>
            <li>dddd1</li>
            <li>dddd2</li>
            <li>dddd3</li>
        </ul>
</body>
<script>
    var ul = document.querySelector('ul');
    //返回全部li子节点
    console.log(ul.children);
    //返回第一个li子节点
    console.log(ul.children[0]);
    //返回最后一个li子节点
    console.log(ul.children[ul.children.length - 1 ]);
</script>

兄弟节点

nextElementSibling 返回当前元素的下一个元素节点找不到返回null

previousElementSibling 返回当前元素的下上一个元素节点找不到返回null

这两个具备兼容性问题 ie9才支持

<body>
    <div>boxs</div>
    <span>span</span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        console.log(div.nextElementSibling); //返回当前元素的下一个元素节点 即span
        console.log(span.previousElementSibling); //返回当前元素的上一个元素节点 即div
    </script>
</body>