MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

DocumentFragment.querySelector()

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

如果选择器中指定了 ID 而这个 ID 被使用了多次(这种用法是错误的),则返回第一个。

如果选择器无效,将抛出一个带有 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
Working Draft 无修改,与 Selectors API Level 1 相同
Selectors API Level 1
DocumentFragment.querySelector
Recommendation 最初的定义。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1) 8.0 10.0 3.2 (525.3)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

参考

文档标签和贡献者

 此页面的贡献者: laobubu
 最后编辑者: laobubu,