Saber 酱的抱枕

Fly me to the moon

05/15
2016
学习

原生js中的利器——querySelectorAll

saber 撰写 单条回复 1,650次查看

昨天发表的那个网站地图助手里，有几个输入框都需要在鼠标经过时自动选中其中的内容。

实现起来没有难度，但类似于getElementBy...这样的选择器难以在不写重复代码的情况下选中几个不同id的元素。所以我的代码写成了这样：

document.getElementById("a").onmouseover=function (argument) {
    this.select();
}
document.getElementById("b").onmouseover=function (argument) {
    this.select();
}
document.getElementById("y").onmouseover=function (argument) {
    this.select();
}
document.getElementById("c").onmouseover=function (argument) {
    this.select();
}

感觉这样实在无法见人，于是去贴吧求助。终于知道了一个好办法：js现在有了一个原生的querySelectorAll方法，可以接受一组css选择器风格的字符串来作为选择器（这点和jQuery很像），如下：

document.querySelectorAll('#a,#b,#c,#y');

这样就解决了重复获取元素的问题了。querySelectorAll简直是一个福音啊。

querySelectorAll和querySelector是HTML5中新增的属性，但是IE8也支持。所以放心的用吧~

由于我们是无法对一个元素集合直接添加事件的，只能用循环来加了（所以jQuery用起来还是更方便啊）。使用for循环就可以，forEach也可以（使用forEach更有逼格？）。不过元素集合并不是数组，要使用forEach的话需要借用数组的属性。于是最后的代码如下：

function selectS(s){
    return document.querySelectorAll(s);
}
[].forEach.call(selectS('#a,#b,#c,#y'),function(e){
    e.onmouseover=function (argument) {
        this.select();
    }
});

原生js中的利器——querySelectorAll