使用选择器定位 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之一的元素。