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 |