files/zh-cn/web/api/documentfragment/queryselector/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

---
title: DocumentFragment.querySelector()
slug: Web/API/DocumentFragment/querySelector
translation_of: Web/API/DocumentFragment/querySelector
---
<div>{{ApiRef("DOM")}}</div>

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

<p>如果选择器中指定了 ID 而这个 ID 在当前文档（document）被错误地使用了多次，则返回第一个匹配的元素。</p>

<p>如果选择器无效，将抛出一个带有 <code>SYNTAX_ERR</code> 值的 {{domxref("DOMException")}} 异常。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><em>selectors </em></dt>
 <dd>为一个 {{domxref("DOMString")}} ，其包含一个或多个CSS选择器，多个选择器用逗号隔开。</dd>
</dl>

<h2 id="Example" name="Example">例子</h2>

<h3 id="基本示例">基本示例</h3>

<p>在该示例中，将返回第一个位于 {{domxref("DocumentFragment")}} 的带有 "<code>myclass</code>" 类的元素。</p>

<pre class="brush: js">var el = documentfragment.querySelector(".myclass");
</pre>

<h3 id="CSS_语法和方法的参数问题">CSS 语法和方法的参数问题</h3>

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

<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
&lt;div id="foo:bar"&gt;&lt;/div&gt;

&lt;script&gt;
document.querySelector('#foo\bar')    // 啥也不匹配
document.querySelector('#foo\\\\bar') // 第一个DIV
document.querySelector('#foo:bar')     // 啥也不匹配
document.querySelector('#foo\\:bar')   // 第二个DIV
&lt;/script&gt;
</pre>

<h2 id="Specification" name="Specification">标准</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">标准</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td>
   <td>{{Spec2('Selectors API Level 2')}}</td>
   <td>无修改，与 {{SpecName('Selectors API Level 1')}} 相同</td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td>
   <td>{{Spec2('Selectors API Level 1')}}</td>
   <td>最初的定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>


<p>{{Compat("api.DocumentFragment.querySelector")}}</p>

<h2 id="See_also" name="See_also">参考</h2>

<ul>
 <li>{{domxref("DocumentFragment")}} 接口</li>
</ul>