JS 选择器querySelector系列和getElementById的区别

1、两者的W3C标准不同
   querySelector系列属于W3C中的Selectors API(JS)规范
   getElementsBy系列则属于 W3C的DOM 规范。
2、两者浏览器的兼容不同
   getElementsBy系列基本能被所有浏览器支持。
   querySelector系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)

//IE7不支持
 var box = document.querySelectorAll('.p2');
 console.log(box);
/* var p1 = document.getElementById('p1');
 //IE8及其以下不支持getElementsByClassName
 var ps = document.getElementsByClassName('p');
 console.log(p1);*/

3、接受参数不同
   querySelector系列接收的参数是一个css选择器名。
   getElementsBy系列接收的参数只能是单一的className、tagName 和 name。
4、返回值不同
   (1)querySelector系列返回的是静态节点列表
     例子：
      var lis = document.querySelectorAll('li');
      console.log(lis);
      var ul = document.querySelector('ul');
      for(var i = 0;i<lis.length;i++){
          //新建一个li  一共会新建四个li
          var li = document.createElement('li');
          li.innerHTML='我是新建的li'+i;
          ul.appendChild(li);
      }
   (2)getElementsBy系列返回的是动态节点列表  回忆 childNodes
     例子：
      var lis = document.getElementsByTagName('li');
      console.log(lis);// 5 6 7
      var ul = document.querySelector('ul');
      for(var i = 0;i<lis.length;i++){
      console.log('来了 老弟');
      //新建一个li
      var li = document.createElement('li');
      li.innerHTML='我是新建的li'+i;
      ul.appendChild(li);
      }