Document: querySelectorAll() 方法

Document 方法 querySelectorAll() 返回一个静态的（非动态的） NodeList，表示与指定选择器组匹配的文档元素列表。

语法

js
querySelectorAll(selectors)

参数

选择器

包含一个或多个选择器的字符串，用于匹配。此字符串必须是有效的 CSS 选择器字符串；如果不是，则会抛出 SyntaxError 异常。

请注意，HTML 规范不要求属性值为有效的 CSS 标识符。如果 class 或 id 属性值不是有效的 CSS 标识符，则您必须在使用它之前对其进行转义，要么通过调用 CSS.escape() 对值进行转义，要么使用 转义字符 中描述的技术之一。有关示例，请参阅 转义属性值。

返回值

一个非动态的 NodeList，其中包含与指定选择器中至少一个匹配的每个元素的 Element 对象，或者在没有匹配项的情况下为空的 NodeList。

注意：如果指定的 选择器 包含 CSS 伪元素，则返回的列表始终为空。

异常

SyntaxError DOMException

如果指定的 选择器 字符串的语法无效，则抛出此异常。

示例

获取匹配项列表

要获取文档中所有 <p> 元素的 NodeList

js
const matches = document.querySelectorAll("p");

此示例返回文档中所有具有 note 或 alert 类别的 <div> 元素的列表

js
const matches = document.querySelectorAll("div.note, div.alert");

在这里，我们获取了 <p> 元素的列表，这些元素的直接父元素是具有 highlighted 类别的 <div>，并且位于 ID 为 test 的容器内。

js
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");

此示例使用 属性选择器 返回文档中包含名为 data-src 的属性的 <iframe> 元素的列表

js
const matches = document.querySelectorAll("iframe[data-src]");

在这里，属性选择器用于返回 ID 为 userlist 的列表中包含的列表项，这些列表项具有 data-active 属性，其值为 1

js
const container = document.querySelector("#userlist");
const matches = container.querySelectorAll("li[data-active='1']");

访问匹配项

返回匹配元素的 NodeList 后，您可以像处理任何数组一样检查它。如果数组为空（即，其 length 属性为 0），则未找到匹配项。

否则，您可以使用标准数组符号访问列表的内容。您可以使用任何常见的循环语句，例如

js
const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});

转义属性值

此示例说明，如果 HTML 文档包含一个 id，它不是有效的 CSS 标识符，则我们必须在使用它之前对其进行转义。在 querySelectorAll() 中。

HTML

在以下代码中，<div> 元素的 id 为 "this?element"，这不是有效的 CSS 标识符，因为 "?" 字符在 CSS 标识符中不允许。

我们还有三个按钮，以及一个 <pre> 元素用于记录错误。

html
<div id="this?element"></div>

<button id="no-escape">No escape</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">Manual escape</button>

<pre id="log"></pre>

CSS

css
div {
  background-color: blue;
  margin: 1rem 0;
  height: 100px;
  width: 200px;
}

JavaScript

所有三个按钮在被点击时，都会尝试选择 <div>，然后将它的背景颜色设置为随机值。

  • 第一个按钮直接使用 "this?element" 值。
  • 第二个按钮使用 CSS.escape() 对值进行转义。
  • 第三个按钮使用反斜杠显式地对 "?" 字符进行转义。请注意，我们还必须使用另一个反斜杠转义反斜杠本身，例如："\\?"。
js
const log = document.querySelector("#log");

function random(number) {
  return Math.floor(Math.random() * number);
}

function setBackgroundColor(id) {
  log.textContent = "";

  try {
    const elements = document.querySelectorAll(`#${id}`);
    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
    elements[0].style.backgroundColor = randomColor;
  } catch (e) {
    log.textContent = e;
  }
}

document.querySelector("#no-escape").addEventListener("click", () => {
  setBackgroundColor("this?element");
});

document.querySelector("#css-escape").addEventListener("click", () => {
  setBackgroundColor(CSS.escape("this?element"));
});

document.querySelector("#manual-escape").addEventListener("click", () => {
  setBackgroundColor("this\\?element");
});

结果

点击第一个按钮会报错，而第二个和第三个按钮正常工作。

规范

规范
DOM 标准
# ref-for-dom-parentnode-queryselectorall①

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅