Document: querySelectorAll() 方法
Document 的 querySelectorAll() 方法返回一个静态（非实时）的 NodeList，代表文档中匹配指定选择器组的元素列表。
语法
querySelectorAll(selectors)
参数
选择器 (selectors)-
一个包含一个或多个要匹配的选择器的字符串。该字符串必须是有效的 CSS 选择器字符串；如果不是，将抛出
SyntaxError异常。请注意，HTML 规范不要求属性值是有效的 CSS 标识符。如果
class或id属性值不是有效的 CSS 标识符，那么在使用它作为选择器之前，您必须对其进行转义，可以通过对该值调用CSS.escape()，或者使用 转义字符 中描述的一种技术。有关示例，请参见 转义属性值。
返回值
一个非实时的 NodeList，其中包含一个 Element 对象，对应于每个至少匹配一个指定选择器的元素；如果没有任何匹配项，则返回一个空的 NodeList。这些元素按照文档顺序排列——即，父元素在子元素之前，早期的兄弟元素在后期的兄弟元素之前。
注意： 如果指定的 selectors 包含 CSS 伪元素，则返回的列表始终为空。
异常
SyntaxErrorDOMException-
如果指定的
selectors字符串语法无效，则抛出此错误。
示例
获取匹配项列表
const matches = document.querySelectorAll("p");
此示例返回文档中所有 class 为 note 或 alert 的 <div> 元素列表。
const matches = document.querySelectorAll("div.note, div.alert");
在这里，我们获取了那些其直接父元素是 class 为 highlighted 的 <div> 且位于 ID 为 test 的容器内的 <p> 元素列表。
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");
此示例使用属性选择器返回文档中包含名为 data-src 属性的 <iframe> 元素列表。
const matches = document.querySelectorAll("iframe[data-src]");
在这里，属性选择器用于返回 ID 为 user-list 的列表项中，包含 data-active 属性且其值为 1 的列表项列表。
const container = document.querySelector("#user-list");
const matches = container.querySelectorAll("li[data-active='1']");
访问匹配项
一旦返回匹配元素的 NodeList，你可以像访问任何数组一样检查它。如果数组为空（即其 length 属性为 0），则表示未找到任何匹配项。
否则，你可以使用标准的数组表示法访问列表内容。你可以使用任何常见的循环语句，例如
const highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach((userItem) => {
deleteUser(userItem);
});
转义属性值
此示例显示，如果 HTML 文档包含一个无效的 CSS 标识符 id，那么在使用 querySelectorAll() 之前，我们必须对属性值进行转义。
HTML
在以下代码中，一个 <div> 元素的 id 是 "this?element"，它不是一个有效的 CSS 标识符，因为 CSS 标识符中不允许使用 "?" 字符。
我们还有三个按钮和一个用于记录错误的 <pre> 元素。
<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
div {
background-color: blue;
margin: 1rem 0;
height: 100px;
width: 200px;
}
JavaScript
所有三个按钮在点击时都会尝试选择 <div>，然后将其背景颜色设置为随机值。
- 第一个按钮直接使用
"this?element"值。 - 第二个按钮使用
CSS.escape()来转义该值。 - 第三个按钮使用反斜杠明确转义
"?"字符。请注意，我们还必须使用另一个反斜杠来转义反斜杠本身，例如："\\?"。
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① |
浏览器兼容性
加载中…