# 如何获取父节点和子节点

乌秋

已于 2023-03-30 23:31:32 修改

阅读量1.5k

点赞数 4

分类专栏： # 前端知识分享文章标签： javascript 前端 html

于 2023-03-30 23:15:23 首次发布

本文链接：https://blog.csdn.net/weixin_46372993/article/details/129865758

版权

前端知识分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、获取父级节点
二、获取子节点
- 1、获取子节点
- 2、获取指定子节点
三、总结

一、获取父级节点

node.parentNode

代码如下（示例）：

<!DOCTYPE html>
<head>父节点操作</head>
<body>
    <div class="box">
        <span class="hang"></span>
    </div>
</body>
<script>
    //获取父节点
    var hang = document.querySelector('.hang');
    //var box = document.querySelector('.box');
    var box = hang.parentNode;
    console.log(box);
</script>
</html>

（1）在控制台可以看到，我们已经获取了span标签的父级节点.box

在这里插入图片描述

（2）需要注意的是node.parentNode只能获取离元素最近的父级节点 (亲父亲)，如果找不到父节点就返回为null

<body>
    <div class="demo">
        <div class="box">
            <span class="hang"></span>
        </div>
    </div>

</body>
<script>
    //获取父节点
    var hang = document.querySelector('.hang');
    //var box = document.querySelector('.box');
    var box = hang.parentNode;
    console.log(box);
</script>

我在.box盒子外面再加一层.demo盒子， hang.parentNode获取的依旧是.box这个盒子

在这里插入图片描述

二、获取子节点

1、获取子节点

parentnode.children

代码如下（示例）：

<!DOCTYPE html>

<head>子节点操作</head>

<body>
    <div class="demo">
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </ul>
    </div>
</body>
<script>
    /*
         //DOM提供的方法（API）获取
         var ul = document.querySelector('ul');
         var lis = ul.querySelectorAll('li');
    */

    //获取子节点  
    var ul = document.querySelector('ul');
    console.log(ul.children);
</script>

</html>

在控制台可以看到，我们已经获取了ul标签下的所有小li

在这里插入图片描述

2、获取指定子节点

1、获取第一个子元素节点

parentnode.firstElementChild

2、获取最后一个子元素节点

parentnode.lastElementChild

代码如下：

<script>
    //获取子节点  
    var ul = document.querySelector('ul');
    console.log(ul.firstElementChild);     //获取第一个
    console.log(ul.lastElementChild);     //获取最后一个
</script>

在这里插入图片描述
（注意：这个方法存在兼容性问题，IE9以上才支持）

3、常用的写法

parentnode.children[i]; //任意一个
parentnode.children[0]; //第一个
parentnode.children[ parentnode.children.length-1]; //最后一个

代码如下：

<script>
    //获取子节点  
    var ul = document.querySelector('ul');
    console.log(ul.children[0]);
    console.log(ul.children[1]);
    console.log(ul.children[ul.children.length - 1]);
</script>