querySelector和querySelectorAll是W3C提供的新的查詢接口

querySelector和querySelectorAll是W3C提供的 新的查詢接口，其主要特點如下：

1、querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
2、querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)。
3、返回的結果是靜態的，之后對document結構的改變不會影響到之前取到的結果。

這兩個方法都可以接受三種類型的參數：id(#)，class(.)，標簽，很像jquery的選擇器。

var obj = document.querySelector("#id");var obj = document.querySelector(".classname");var obj = document.querySelector("div");

var el = document.body.querySelector("style[type='text/css'], style:not([type])");var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");

目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）
瀏覽器支持查看

module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};

從接口定義可以看到Document、DocumentFragment、Element都實現了NodeSelector接口。即這三種類型的元素都擁有者兩個方法。querySelector和querySelectorAll的參數須是符合 css selector 的字符串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)。

目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已經支持它們。

如想獲取頁面class屬性為"red"的元素，除了使用document.getElementsByClassName('red')還可以使用document.querySelector('.red')和document.querySelectorAll('.red')。

但Element.querySelector和Element.querySelectorAll的實現有錯誤，如下