zoukankan      html  css  js  c++  java
  • querySelectorAll / getElementsBy... 的比较

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta charset="utf-8" />
        <style>
            body{background:#808080;font-family:Arial, Helvetica, sans-serif;}
            .aa{
                float:left;
                width:100px;
                height:100px;
                margin:20px;
                background:#000; /*黑色*/
            }
            .cc{
                float:left;
                width:100px;
                height:100px;
                margin:20px;
                background:#f26f6f; /*粉色*/
            }
        </style>
    </head>
    <body>
        <div class="aa"><div class="bb"></div></div>
        <div class="aa"><div class="bb"></div></div>
        <div class="aa"><div class="bb"></div></div>
        <input type="button" id="btn" value="button"/>
        <script>
            var arr1 = document.getElementsByClassName('aa');
            //var arr1 = document.querySelectorAll('.aa');
            //点击button后div的背景由黑色变为粉色
            document.getElementById('btn').onclick = function () {
                arr1[0].className = 'cc';
            };
        </script>
    </body>
    </html>
    显示效果



    getElementsByClassName()
      
    连续点击button后,3个div背景依次改变。原因是每次触发onclick事件改变div的className,使获取到的元素arr[0]变为下一个div。
    querySelectorAll()
      
    点击button仅会使第一个div背景改变。

    总结:getElementsBy..()方法创建的NodeList事例是实时的,即时反映当前状态,随文档状态改变随时更新。
       querySelectorAll()方法创建的列表不反映文档变动,静态而非实时。
     
  • 相关阅读:
    六、springboot集成Swagger2
    五、springboot单元测试
    四、Springboot Debug调试
    三、springboot热部署
    二、springboot配置
    一、springboot入门
    SpringBoot整合RabbitMQ
    消息总线
    分布式配置
    路由网关---zuul
  • 原文地址:https://www.cnblogs.com/qimeng/p/6659495.html
Copyright © 2011-2022 走看看