使用選擇器定位 DOM 元素

Selectors API 提供了一些方法，可以快速輕鬆地根據一組選擇器從 DOM 中檢索Element節點。這比過去的技術快得多，在過去的技術中，需要例如在 JavaScript 程式碼中使用迴圈來查詢需要查詢的特定專案。

NodeSelector 介面

此規範為實現Document、DocumentFragment或Element介面的任何物件添加了兩種新方法。

querySelector(): 返回節點子樹中第一個匹配的Element節點。如果未找到匹配的節點，則返回null。
querySelectorAll(): 返回一個NodeList，其中包含節點子樹中所有匹配的Element節點，如果未找到匹配項，則返回一個空NodeList。

注意：querySelectorAll()返回的NodeList不是即時的，這意味著 DOM 中的變化不會反映在集合中。這與返回即時節點列表的其他 DOM 查詢方法不同。

您可以透過閱讀Element.querySelector()和Element.querySelectorAll()方法的文件來查詢示例和詳細資訊。

選擇器方法接受選擇器來確定應返回哪個元素或元素。這包括選擇器列表，因此您可以在單個查詢中組合多個選擇器。

為了保護使用者的隱私，某些偽類不受支援或行為有所不同。例如:visited將不返回任何匹配項，而:link將被視為:any-link。

只能選擇元素，因此不支援偽類。

要選擇文件中所有類包含warning或note的段落 (p) 元素，您可以執行以下操作

const special = document.querySelectorAll("p.warning, p.note");

您還可以按 ID 查詢。例如

const el = document.querySelector("#main, #basic, #exclamation");

執行上述程式碼後，el包含文件中第一個 ID 為main、basic或exclamation之一的元素。