我经常会写些类似这样的代码,
<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']");
赞美你!!!
