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()方法创建的列表不反映文档变动,静态而非实时。
 
原文地址:https://www.cnblogs.com/qimeng/p/6659495.html