DIV CSS 佈局教程網

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

//獲取body元素
var body = document.querySelector("body");
//獲取ID為myDiv的元素
var myDiv = document.querySelecotr("#myDiv");
//獲取第一個包含類selected的元素
var selected = document.querySelector(".selected");
//獲取第一個包含類button的圖像元素
var img = document.body.querySelector("img.button");

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

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

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

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

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

var svgImage = document.querySelector("svg|svg", function (prefix) {
    switch (prefix) {
    case :"svg":
        return "http://www.w3.rog/2000/svg";
    }
});

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