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()方法创建的列表不反映文档变动，静态而非实时。
 
posted @ 2017-04-02 18:06  tt273z  阅读(230)  评论(0)  编辑  收藏  举报