querySelectAll() Javascript实例教程:querySelectorAll()方法

78 阅读 0 评论 52 点赞

我是靠谱客的博主精明溪流，这篇文章主要介绍querySelectAll() Javascript实例教程:querySelectorAll()方法，现在分享给大家，希望可以做个参考。

Javascript实例教程:querySelectorAll()方法

querySelectorAll()接受和querySelector()一样的两个参数，即CSS查询和可选的命名空间解析器，但是返回的是所有匹配的节点而非单个。该方法返回一个叫做StaticNodeList的新类型的实例。

顾名思义，StaticNodeList有NodeList所有的属性和方法，但是它底层的实现是元素集合的一个快照，而非总是要重新的针对文档的动态查询。使用StaticNodeList消除了大部分使用NodeList对象带来的性能问题。

只要调用querySelectorAll()都会返回一个StaticNodeList对象不管匹配的元素有几个；如果没有匹配，那么 StaticNodeList为空。querySelectorAll()和querySelector()一样存在与Document和Element 类型上。如下是一些例子：

复制代码

1
2
3
4
5
6
7
8
//获取<div>中的所有图像（和getElementsByTaName("img")一样）
var images = document.getElementById("myDiv").querySelectorAll("img");

//获取所有包含“selected”类的元素
var selected = document.querySelectorall(".selected");

//获取所有<p>元素中的<strong>元素
var strongs = document.querySelectorAll("p strong");

返回的StaticNodeList对象可以以NodeList一样的方式迭代，使用item()或者是方括号标记来检索单个元素。如下面的例子：

复制代码

1
2
3
4
for (var i = 0, len = strongs.length; i < len; i++) {
    var strong = strong[i]; //或strongs.item(i)
    strong.className = "important";
}

可以如下面的例子所示，在querySelectorAll()中使用一个命名空间解析器：

复制代码

1
2
3
4
5
6
var svgImages = document.querySelectorAll("svg|svg", function (prefix) {
    switch (prefix) {
        return "http://www.w3.org/2000/svg";
        //此处其它代码
    }
});

转载于:https://my.oschina.net/u/559610/blog/177460