DIV CSS 佈局教程網

querySelectorAll()接受和querySelecort()一樣的兩個參數，即CSS查詢和可選的命名空間解析器，但是返回的是所有匹配的節點而非單個。該方法返回一個叫做StaticNodeList的新類型的實例。

顧名思義，StaticNodeList有NodeList所有的屬性和方法，但是它底層的實現是元素集合的一個快照，而非總是要重新的針對文檔的動態查詢。使用StaticNodeList消除了大部分使用NodeList對象帶來的性能問題。

只要調用querySelectorAll()都會返回一個StaticNodeList對象不管匹配的元素有幾個；如果沒有匹配，那麼StaticNodeList為空。querySelectorAll()和querySelector()一樣存在與Document和Element類型上。如下是一些例子：

//獲取<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()或者是方括號標記來檢索單個元素。如下面的例子：

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

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

var svgImages = document.querySelectorAll("svg|svg", function (prefix) {
    switch (prefix) {
        return "http://www.w3.org/2000/svg";
        //此處其它代碼
    }
});

這段例子檢索了文檔中的所有使用<svg:svg>定義的SVG圖像。