選擇器 API：querySelector 和 querySelectorAll

使用 querySelector 和 querySelectorAll 訪問 DOM 元素。它們接受任何 CSS 選擇器，所以現在您不再受限於僅通過 id 選取元素

• 介紹
• 選擇器 API
• 基本的從 jQuery 到 DOM API 的範例
  • 通過 id 選取
  • 通過 class 選取
  • 通過標籤名選取
• 更高級的從 jQuery 到 DOM API 的範例
  • 選取多個項目
  • 通過 HTML 屬性值選取
  • 通過 CSS 偽類選取
  • 選取元素的後代

介紹

過去，jQuery 和其他 DOM 函式庫由於提供了一種在頁面上選取元素的簡單方法而大獲成功。傳統上，瀏覽器僅提供了一種選取 DOM 元素的方法 - 通過其 id 屬性，使用 document 物件提供的 getElementById() 方法。

選擇器 API

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

• 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')

由於 id 在頁面中是唯一的，我們使用 querySelector

通過 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)')

選取元素的後代

例如，選取 #test 下的所有 li 元素：

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