JS中的CSS選擇器

在 2008 年以前，瀏覽器中大部分 DOM 擴充套件都是專有的。此後，W3C 將一些已經成為事實標準的專有擴充套件標準化並寫入規範中。Selectors API 就是由 W3C 發布的一個事實標準，為瀏覽器實現原生的 CSS 選擇器。

Selectors API Level 1（http://www.w3.org/TR/selectors-api/）的核心是兩個方法：querySelector() 和 querySelectorAll()，在相容瀏覽器中可以通過文件節點或元素節點呼叫。目前已完全支援 Selectors API Level 1 的瀏覽器有 IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。

Selectors API Level 2（http://www.w3.org/TR/selectors-api2/）規範為元素增加了 matchesSelector() 方法，這個方法接收一個 CSS 選擇符引數，如果呼叫的元素與該選擇符匹配，則返回 true；否則返回 false。目前，瀏覽器對其的支援不是很完善。

querySelector() 和 querySelectorAll() 方法的引數必須是符合 CSS 選擇符語法規則的字串，其中 querySelector() 返回一個匹配元素，querySelectorAll() 返回一個匹配集合。

範例1

新建網頁文件，輸入下面的 HTML 結構程式碼。

<div class="content">
    <ul>
        <li class="red">財經</li>
        <li class="blue">娛樂</li>
        <li class="red">時尚</li>
        <li class="blue">網際網路</li>
    </ul>
</div>

如果要獲得第 1 個 li 元素，可以使用以下方法。

document.querySelector(".content ul li");

如果要獲得所有 li 元素，可以使用以下方法。

document.querySelectorAll(".content ul li");

如果要獲得所有 class 為 red 的 li 元素，可以使用以下方法。

document.querySelectorAll("li.red");

DOM API 模組也包含 getElementsByClassName() 方法，使用該方法可以獲取指定類名的元素。例如：

document.getElementsByClassName("red");

getElementsByClassName() 方法只能接收字串，且為類名，而不需要加點號字首，如果沒有匹配到任何元素則返回空陣列。

CSS 選擇器是一個便捷的確定元素的方法，這是因為大家對 CSS 已經很熟悉了。當需要聯合查詢時，使用 querySelectorAll() 更加便利。

範例2

在文件中一些 li 元素的 class 名稱是 red，另一些 class 名稱是 blue，可以用 querySelectorAll() 方法一次性獲得這兩類節點。

var lis = document.querySelectorAll("li.red, li.blue");

如果不使用 querySelectorAll() 方法，那麼要獲得同樣的列表，需要選擇所有的 li 元素，然後通過疊代操作過濾出那些不需要的專案列表。

var result = [], lis1 = document.getElementsByTagName('li'), classname='';
for (var i = 0; len = lis1.length; i < len; i ++) {
    classname = lis1[i].className;
    if (classname === 'red' || classname === 'blue') {
        result.push (lis1[i]);
    }
}

比較上面兩種不同的用法，使用選擇器 querySelectorAll() 方法比使用 getElementsByClassName() 方法的效能要快得多。因此，如果瀏覽器支援 document.querySelectorAll()，那麼最好使用它。