JavaScript 元素的遍历

最新推荐文章于 2025-02-27 20:44:22 发布

咸瑜

最新推荐文章于 2025-02-27 20:44:22 发布

阅读量178

点赞数

文章标签： javascript 前端 servlet java 开发语言

本文链接：https://blog.csdn.net/m0_46268961/article/details/125378870

版权

本文介绍了五个重要的DOM属性：childElementCount、firstElementChild、lastElementChild、previousElementSibling和nextElementSibling。通过实例展示了如何使用这些属性来操作HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实这里主要介绍5个属性啊

调用者是节点

注意这里是元素的遍历元素啊！字眼啊！

这里5个属性分别是：

childElementCount

 //获取到元素的个数
---------------------------------1

firstElementChild

//获取到第一个元素

可以说是  firstChild  的元素版

---------------------------------2

lastElementChild

//获取到最后一个元素

可以说是    lastChild    的元素版

---------------------------------3

previousElementSibling

//获取到前一个同辈元素

可以说是　　previousSibling　　的元素版

---------------------------------4

nextElementSibling

 //获取到后一个同辈元素

可以说是  nextSibling　　的元素版

---------------------------------5


来个例子你就懂了啊！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <p>我是傻逼</p>
    <hr>
    <div id="bihu">
        <a href="https://www.baidu.com/">百度一下</a>
        <a href="https://www.baidu.com/">程序员的路</a>
        <a href="https://www.baidu.com/">入门到入坟</a>
        <a href="https://www.baidu.com/">兴趣到迷茫</a>
        <a href="https://www.baidu.com/">跳槽到歇逼</a>
    </div>
    <hr>
    <p>我快歇逼</p>



    <hr>

        <script type="text/javascript">
            var div = document.getElementById('bihu');    //先获取到div的节点
            document.write(div.childElementCount + "<pre>\n</pre>");        //获取到元素的个数
            document.write(div.firstElementChild + "<pre>\n</pre>");        //获取到第一个元素
            document.write(div.lastElementChild + "<pre>\n</pre>");        //获取到最后一个元素
            document.write(div.previousElementSibling + "<pre>\n</pre>");  //获取到前一个同辈元素
            document.write(div.nextElementSibling + "<pre>\n</pre>");        //获取到后一个同辈元素
            /*-------用   console.log()看  这里 write 只显示他的地址....*/
            
        </script>
</body>
</html>