Javascript執行個體教程:querySelector()方法

文章簡介：querySelector()方法接受一個CSS查詢並返回匹配模式的第一個子孫元素，如果沒有匹配的元素則返回null。

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("svgsvg", function (prefix) {    switch (prefix) {    case :"svg":        return "http://www.w3.rog/2000/svg";    }});

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