DOM元素的選擇

wangxiaoxaio發表於2019-04-14

使用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高程讀後感

相關文章