DOM节点操作----节点层级

最新推荐文章于 2022-12-13 16:04:48 发布

忧郁火龙果

最新推荐文章于 2022-12-13 16:04:48 发布

阅读量241

点赞数

分类专栏： JS基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/LQlove1/article/details/125210076

版权

JS基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、节点操作分类

父节点 ---- node.parentNoed
子节点 ---- node.children 或 node.childNodes
兄弟节点 ---- node.previuouSibling 或 node.nextSibling 中间可以加Elements表示获取元素节点而不是所有节点的上一个或者下一个

二、父节点操作

如果没有父节点返回null

代码演示：

<!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 class="father">
        <li class="child"></li>
    </ul>
</body>
<script>
    var child = document.querySelector('.child');
    console.log(child.parentNode);
</script>
</html>

结果展示：
请添加图片描述

三、子节点操作

node.childNodes ---- 获取所有的节点包括文本节点
node.children ---- 只获取我们需要的元素节点

代码演示：

<!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>子元素节点</li>
        <li>子元素节点</li>
        <li>子元素节点</li>
        <li>子元素节点</li>
        <li>子元素节点</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // node.childNodes获取到的节点包括文本节点，一般不用
        var lis = ul.childNodes;
        console.log(lis);
        // 第二种方法：node.children
        var lisPlus = ul.children;
        console.log(lisPlus);
    </script>
</body>
</html>

展示结果：
请添加图片描述

四、兄弟节点操作

node.nextSibling ---- 获取上一个节点（包括文本节点）
node.nextElementSibling ---- 获取上一个元素节点
node.previousSibling ---- 获取上一个节点（包括文本节点）
node.previousElementSibling ---- 获取上一个元素节点

代码演示：

<!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>
    <div class="dage">我是大哥刘备</div>
    <div class="erge">我是二哥关羽</div>
    <div class="sandi">我是三弟张飞</div>
    <script>
        var erGe = document.querySelector('.erge');
        // 输出上一个兄弟节点（包括文本节点）
        console.log(erGe.previousSibling);
        // 输出下一个兄弟（包括文本节点）
        console.log(erGe.nextSibling);
        // 输出上一个兄弟节点（包括文本节点）
        console.log(erGe.previousElementSibling);
        // 输出下一个兄弟（包括文本节点）
        console.log(erGe.nextElementSibling);
    </script>
</body>
</html>

展示结果：
请添加图片描述

五、注意事项

节点操作的时候最好使用querySelector或者querySelectorAll

忧郁火龙果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM节点操作----节点层级

1. **父节点 ---- node.parentNoed** 2. **子节点 ---- node.children 或 node.childNodes** 3. **兄弟节点 ---- node.previuouSibling 或 node.nextSibling 中间可以加Elements表示获取元素节点而不是所有节点的上一个或者下一个**...
复制链接

扫一扫