js选择器和jquery选择器的比较

document.getElementById("#id")根据id属性来选择

document.getElementsByClassName根据class属性来选择，注意这里class可能有多个的，所以要加s，可是这个好像具有兼容性呢，在ie8及其以下浏览器中，不能使用。解决：加入兼容性判断，在需要用到该方法的位置修改为getClassNames方法。用下面这个方法来解决兼容性问题吧。

             var  divs = getClassNames('tabs_div' , 'div');

function getClassNames(classStr,tagName){

      if (document.getElementsByClassName) {

            return document.getElementsByClassName(classStr)

      }else {

            var nodes = document.getElementsByTagName(tagName),ret = [];         

            for(i = 0; i < nodes.length; i++) {

         if(hasClass(nodes[i],classStr)){

                ret.push(nodes[i])

         }

      }

      return ret;

       }

}

function hasClass(tagStr,classStr){

     var arr=tagStr.className.split(/\s+/ );  //这个正则表达式是因为class可以有多个,判断是否包含

     for (var i=0;i<arr.length;i++){

            if (arr[i]==classStr){

                  return true ;

            }

     }

     return false ;

}

document.getElementsByTagName根据标签名来选择，标签就是html里面的那些div a p等等等啦，注意到这里加s了。它得到的是一个数组。所以有时看到document.getElementsByTagName("p")[0]是取得第一个p标签。但是也有兼容性。呼，心累啊，怎么就不能友好的玩耍呢？ 

解决方法

var getElementsByName = function(tag,name){ 

var returns = document.getElementsByName(name);  

if(returns.length > 0) 

return returns;  

returns = new Array();  

var e = document.getElementsByTagName(tag); 

for(var i = 0; i < e.length; i++){  

if(e[i].getAttribute("name") == name){  

returns[returns.length] = e[i];  

}  

}  

return returns;

}

在来说说jquery的一些了两个选择器

querySelector()这个里面可以是class，也可以是id属性。querySeletor(".classname")/querySeletor("$id")

querySelectorAll()和上面的区别就是，上面的只能选择一个，就是最开始的一个，而这个有了all就可以选择所有符合条件的

而且它更加灵活

document.querySelector('input[type='text']')或者document.querySelector('div>li:first-child')