<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()方法创建的列表不反映文档变动，静态而非实时。