• 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

  • 相关阅读:
    C语言中的复合类型
    C语言中的函数与指针
    C语言中的循环结构与选择结构
    C语言中的运算符
    C语言中的变量
    毕业论文查重网站
    Protocol and Delegate协议和代理
    NSArray与NSMutableArray 数组与可变数组
    UI复习
    NSString方法与NSMutableString方法
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14780097.html
Copyright © 2020-2023  润新知