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
Obsolete 无修改,与 Selectors API Level 1 相同
Selectors API Level 1
DocumentFragment.querySelector
Obsolete 最初的定义。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,