DocumentFragment.querySelector()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DocumentFragment.querySelector() 方法返回第一个在 DocumentFragment 中的、符合选择器的元素。其使用深度优先,前序遍历规则遍历文档中的节点。如果没有匹配结果,返回 null

如果选择器中指定了 ID 而这个 ID 在当前文档(document)被错误地使用了多次,则返回第一个匹配的元素。

如果选择器无效,将抛出一个带有 SYNTAX_ERR 值的 DOMException 异常。

语法

element = documentfragment.querySelector(selectors);

参数

selectors

为一个 DOMString,其包含一个或多个 CSS 选择器,多个选择器用逗号隔开。

例子

基本示例

在该示例中,将返回第一个位于 DocumentFragment 的带有 "myclass" 类的元素。

js
var 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"); // 啥也不匹配
  document.querySelector("#foo\\\\bar"); // 第一个 DIV
  document.querySelector("#foo:bar"); // 啥也不匹配
  document.querySelector("#foo\\:bar"); // 第二个 DIV
</script>

标准

Specification
DOM Standard
# ref-for-dom-parentnode-queryselector①

浏览器兼容性

BCD tables only load in the browser

参考