DOM 樹上的選擇與遍歷
選擇器 API 提供了方法，可以根據一組 選擇器 快速輕鬆地從 DOM 中檢索 Element 節點。這比過去的技術要快得多，例如，過去需要使用 JavaScript 程式碼中的迴圈來查詢您需要找到的特定項。
NodeSelector 介面
此規範向實現 Document、DocumentFragment 或 Element 介面的任何物件添加了兩個新方法
querySelector()-
返回節點子樹中第一個匹配的
Element節點。如果沒有找到匹配的節點，則返回null。 querySelectorAll()-
返回一個包含節點子樹中所有匹配的
Element節點的NodeList，如果沒有找到匹配項，則返回一個空的NodeList。
注意： querySelectorAll() 返回的 NodeList 不是即時的，這意味著 DOM 的更改不會反映在該集合中。這與其他返回即時節點列表的 DOM 查詢方法不同。
您可以透過閱讀 Element.querySelector() 和 Element.querySelectorAll() 方法的文件來查詢示例和詳細資訊。
選擇器
選擇器方法接受 選擇器 來確定應返回哪個或哪些元素。這包括 選擇器列表，因此您可以在單個查詢中組合多個選擇器。
為了保護使用者隱私，某些 偽類 不受支援或行為不同。例如，:visited 將不返回任何匹配項，而 :link 被視為 :any-link。
只能選擇元素，因此 偽類 不受支援。
示例
要選擇文件中所有包含 warning 或 note 類的段落 (p) 元素，您可以執行以下操作
js
const special = document.querySelectorAll("p.warning, p.note");
您也可以按 ID 查詢。例如
js
const el = document.querySelector("#main, #basic, #exclamation");
執行上述程式碼後，el 包含文件中 ID 為 main、basic 或 exclamation 的第一個元素。