Selectors API：querySelector和querySelectorAll

使用querySelector和querySelectorAll訪問DOM元素。它們接受任何CSS選擇器，因此您不再受選擇元素的限制id

介紹

jQuery等DOM過去，庫及其提供的其他功能極大地提高了人氣，這要歸功於一種簡便的選擇頁面元素的方法。

傳統上，瀏覽器僅提供一種選擇DOM元素的方式-通過其id屬性，帶有getElementById()，由document目的。

選擇器API

自2013年以來選擇器API，DOM使您可以使用兩種更有用的方法：

  • document.querySelector()
  • document.querySelectorAll()

它們可以安全使用，正如caniuse.com告訴我們的，並且除了所有其他現代瀏覽器之外，它們甚至在IE9上也完全受支持，因此沒有理由避免使用它們，除非您需要支持IE8（具有部分支持）及以下版本。

它們接受任何CSS選擇器，因此您不再受選擇元素的限制id。

  • document.querySelector()返回單個元素，第一個找到
  • document.querySelectorAll()返回包裝在NodeList對像中的所有元素。

這些都是有效的選擇器：

  • document.querySelector('#test')
  • document.querySelector('.my-class')
  • document.querySelector('#test .my-class')
  • document.querySelector('a:hover')

從jQuery到DOM API的基本示例

以下是將流行的jQuery API轉換為本地DOM API調用的翻譯。

選擇依據id

$('#test')
document.querySelector('#test')

我們用querySelector自從id在頁面中是唯一的

選擇依據class

$('.test')
document.querySelectorAll('.test')

按標籤名稱選擇

$('div')
document.querySelectorAll('div')

jQuery到DOM API的更高級示例

選擇多個項目

$('div, span')
document.querySelectorAll('div, span')

按HTML屬性值選擇

$('[data-example="test"]')
document.querySelectorAll('[data-example="test"]')

通過CSS偽類選擇

$(':nth-child(4n)')
document.querySelectorAll(':nth-child(4n)')

選擇元素的後代

例如全部li下的元素#test：

$('#test li')
document.querySelectorAll('#test li')

免費下載我的JavaScript初學者手冊


更多瀏覽器教程：


在線技術維基！