DOM元素的選擇

使用jQuery能夠方便的選擇文檔中的元素，它的核心就是經過CSS選擇符查詢DOM文檔取得元素的引用，從而拋開getElementById()和getElementsByTagName().

Selector API讓瀏覽器原生支持這些功能，解析和查詢文檔的操做能夠在瀏覽器內部完成，能夠極大的改善性能。

Selector API Level 1的核心是兩個方法：querySelector()和querySelectorAll(),在兼容的瀏覽器中，能夠經過Document 和Element類型的實例調用它們。目前 已完 全 支持 Selectors API Level 1 的 瀏覽器 有 IE 8+、 Firefox 3. 5+、 Safari 3. 1+、 Chrome 和 Opera 10+。

querySelector()方法接收一個css選擇符，返回與該模式匹配度額第一個元素，若是沒有找到匹配的元素，返回null.

//取得body元素
var body = document.quertSelector('body');
//取得ID爲‘myDiv’的元素
var myDiv = document.querySelector('#myDiv');
//取得類爲'selected'的第一個元素
var selected = document.querySelector('.selected');
//取得類爲'button'的第一個圖像元素
var img = document.querySelector('img.button');
複製代碼

經過Document類型調用querySelector()方法時，會在文檔範圍沒查找，而經過Element類型調用時，只會在該元素的後代範圍內查找。若是傳入的參數不被支持，該方法會拋出錯誤。

querySelectorAll()方法接收一個css選擇符，返回一個NodeList的實例（類數組對象），該實例包含全部匹配的元素，返回的內容不是對文檔進行動態搜索的結果，而是相似一組元素的快照，若是文檔中沒有匹配的元素，返回空的NodeList。

可以調用querySelector()方法的類型包括Document,DocumentFragment和Element.

//取得全部類爲'selected'的全部元素
var selecteds = document.querySelectorAll('.selected');
複製代碼

若是要遍歷返回的NodeList中的每個元素，能夠使用item()方法或者方括號語法。 若是傳入的選擇符有錯誤或者不被支持，該方法一樣會拋出錯誤。

Selector API Level2規範爲Element類型新增了一個matchesSelector()方法。該方法接收一個css選擇符做爲參數，若是調用該方法的元素與該選擇符匹配，返回true，不然返回false.

在取得某個元素的引用的狀況下，使用該方法可以方便的檢測它是否能被querySelector()和querySelectorAll()方法返回。

截止到如今，Firefox和chrome並未實現該方法，可是，Firefox提供了mozMatchesSelector()支持該方法，Safari 5+ 和Chrome經過webkitMatchesSelector()支持該方法。這裏有一個包裝函數能夠更好的使用該方法：

function matchesSelector(element,selector){
  if(element.matchesSelector){
      return element.matchesSelector(selector);
  } else if(element.msMatchesSelector){
      return element.msMatchesSelector(selector);
  } else if(element.mozMatchesSelector){
      return element.mozMatchesSelector(selector);
  } else if(element.webkitMatchesSelector) {
      return element.webkitMatchesSelector(selector);
  } else{
      return new Error('Not supported.');
  }
}
複製代碼

本文爲JS高程讀後感