节点操作--层级（父子兄）关系

矢目

于 2021-06-22 19:59:05 发布

阅读量602

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_48104836/article/details/118113092

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

利用节点层级关系获取元素

利用父子兄节点关系获取元素

网页中所有内容都是节点（标签，属性，文本，注释）。

DOM树中的所有节点都可以通过JavaScript来访问，元素皆可被访问并修改

节点：一般地节点至少拥有nodeType（节点类型），nodename（节点名称）和nideValue（节点值）三个基本属性

元素节点 nodeType为1；
属性节点：nodeType为2
文本节点：nodeType为3；（文本节点包含文字，空格，换行等）

父节点：node.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="cl"></div>
    <script>
        var cl=document.querySelector('.cl');
        //得到的是离元素最近的父节点，如何找不到则返回为null
        console.log(cl.parentNode);
    </script>
</div>

</body>
</html>

子节点：node.children     获取所有的子元素节点

<ul class="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var ul=document.querySelector('.ul');
    //获取所有li地子节点
    console.log(ul.children);

</script>

获取ul下li地第一个子节点和最后一个子节点

<body>
<div class="box">
    <div class="cl"></div>
   
</div>
<ul class="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
    var ul=document.querySelector('.ul');
    //实际：获取元素地第一个子节点和最后一个子节点地方法
    console.log(ul.children[0]);
    console.log(ul.children[ul.children.length-1])

</script>

</body>

这个可以结合chlidren使用，chlidren返回的是一个数组，可通过元素下标地方式获取

兄弟节点

元素.previousElementSibling //获取当前节点的前一个同级节点

元素.nextElementSibling //获取当前节点的后一个同级节点

有兼容性问题 IE9以上

感言：

量的积累

矢目

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录