querySelector()方法

標簽: querySelector JavaScrit

頂[10] 分享到 發表評論(0) 編輯詞條

 querySelector()方法接受一個CSS查詢並返回匹配該模式的第一個子孫元素，如果沒有匹配的元素則返回null。請看下面例子：

//獲取body元素

var body = document.querySelector("body");

//獲取ID為myDiv的元素

var myDiv = document.querySelector("#myDiv");

//獲取第一個包含class值為selected的元素

var selected = document.querySelector(".selected");

//獲取第一個包含class值為button的圖像元素

var img = document.body.querySelector("img.button");

當querySelector()方法應用Document類型上時，它會嘗試從文檔元素開始匹配模式，如果應用於Element類型，查詢則只會嘗試從該元素的子孫節點中尋找匹配。

CSS查詢可以根據需要復雜化或者簡單化。如果查詢中有語法錯誤或者有不支持的選擇器，那么querySelector()會拋出一個錯誤。

querySelector()方法還接可選的第二個參數，它是一個命名空間解析器，就是一個接受一個命名空間前綴並返回其相關URI的函數，類似於：

var nsresolver = function(prefix){
    switch(prefix){
        case "worx":  return "http://www.worx.com";
        //此處其他代碼
    }
};

命名空間解析器對於在嵌入了其他語言諸如SVG或MathML的XHTML文檔中執行查詢非常有用，XML文檔亦如此。CSS查詢中的命名空間是使用一個管道來指定的，如下：

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

這個例子通過在文檔中查找定義為<svg:svg>的元素返回了第一個SVG圖像。當在查詢中遇到了svg命名空間前綴時，則調用命名空間解析器函數來確定URI。沒有命名空間解析器，則會拋出一個錯誤，因為查詢引擎無法辨識svg命名空間前綴。