JavaScript 元素的遍历

其实这里主要介绍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>




 







            

            
posted @ 
2021-05-18 11:03 
咸瑜 
阅读(503) 
评论(0) 
编辑 
收藏 
举报