DocumentFragment.querySelector()

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

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

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

语法

element = documentfragment.querySelector(selectors);

参数

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

例子

基本示例

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

var el = documentfragment.querySelector(".myclass");

CSS 语法和方法的参数问题

传递给 querySelector 的字符串参数遵循 CSS 语法。如果 ID 或选择器不符合 CSS 语法(比如使用了半角分号和空格),必须使用双反斜杠对字符做转义。

<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>

标准

标准 状态 注释
Selectors API Level 2
DocumentFragment.querySelector
Obsolete 无修改,与 Selectors API Level 1 相同
Selectors API Level 1
DocumentFragment.querySelector
Obsolete 最初的定义。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
querySelectorChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

参考