<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()方法创建的列表不反映文档变动，静态而非实时。
querySelectorAll()/getElementsBy..()--区别小案例
原文：http://www.cnblogs.com/qimeng/p/6659495.html