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>
</pre>");        //获取到元素的个数
            document.write(div.firstElementChild + "<pre>
</pre>");        //获取到第一个元素
            document.write(div.lastElementChild + "<pre>
</pre>");        //获取到最后一个元素
            document.write(div.previousElementSibling + "<pre>
</pre>");  //获取到前一个同辈元素
            document.write(div.nextElementSibling + "<pre>
</pre>");        //获取到后一个同辈元素
            /*-------用   console.log()看  这里 write 只显示他的地址....*/
            
        </script>
</body>
</html>

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14780097.html

原文地址:https://www.cnblogs.com/bi-hu/p/14780097.html