js中如何像css选择器那样获取指定的DOM集合

我经常会写些类似这样的代码,

       <input type="button" value="">
       <input type="button" value="">
       <input type="checkbox" name=""value="" />
       <input type="button" value="">
       <input type="text" value="" >
       <input type="radio" value="" >
       <input type="button" value="" >

为了把button都取出来,不得不

var btn=document.getElementsByTagName("input");

然后再对btn这个对象集合进行近一步处理.每当这时都不胜其烦呐!

后来想了另一个办法.就是在input上给name属性:

       <input type="button" name="button" value="">
       <input type="button"name="button"  value="">
       <input type="checkbox" name=""value="" />
       <input type="button" name="button" value="">
       <input type="text" value="" >
       <input type="radio" value="" >
       <input type="button" name="button" value="" >

var btn=document.getElementsByName("button");

这样就可以一步到位的取出button集合.
看起来问题是解决了.但是呢,身为强迫症患者,看着html里新加的那一片name="button"就各种难受.难道就不能像css属性选择器那样,直接input[type="button"]一下搞定吗?

直到我遇见了如此迷人的你 document.querySelectorAll()

document.querySelectorAll()
HTML5中引入的新方法，
返回文档中匹配的CSS选择器的所有元素节点列表

自此以后,再也不用做二次处理,或是添加看着就臃肿的name;
干净,直接,一次搞定.

var btn=document.querySelectorAll("input[type='button']");

赞美你!!!