DocumentFragment: querySelector() 方法

DocumentFragment.querySelector() 方法返回 DocumentFragment 中第一个与指定选择器组匹配的元素（使用文档节点的深度优先前序遍历），如果没有匹配项则返回 null。

如果选择器匹配一个 ID，而此 ID 在文档中被错误地使用了多次，则返回第一个匹配的元素。

如果参数中指定的选择器无效，则会引发带有 SYNTAX_ERR 值的 DOMException。

语法

js
querySelector(selectors)

参数

选择器

包含一个或多个用逗号分隔的 CSS 选择器的字符串。

返回值

一个 Element 对象，表示文档中第一个与指定 CSS 选择器 集匹配的元素，如果没有匹配项则返回 null。

示例

基本示例

在此基本示例中，返回 DocumentFragment 中第一个具有类 "myclass" 的元素。

js
const el = documentfragment.querySelector(".myclass");

CSS 语法和方法参数

传递给 querySelector 的字符串参数必须遵循 CSS 语法。要匹配 ID 或不遵循 CSS 语法的选择器（例如，使用分号或空格不当），必须用双反斜杠转义错误字符。

html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  document.querySelector("#foo\bar"); // Does not match anything
  document.querySelector("#foo\\\\bar"); // Match the first div
  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅