blob: 340fd3b9b12c9df931c790969f0832a7fa624e61 (
plain)
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Element.querySelector()
slug: Web/API/Element/querySelector
tags:
- Element.querySelector()
translation_of: Web/API/Element/querySelector
---
<div>{{APIRef("DOM")}}</div>
<div>返回与指定的选择器组匹配的元素的后代的第一个元素。</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush:js"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
</pre>
<ul>
<li><code>element</code> 和 <code>baseElement</code> 是 {{domxref("element")}} 对象.</li>
<li><code>selectors</code> 是一个CSS选择器字符串( <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> )</li>
</ul>
<h3 id="参数">参数</h3>
<dl>
<dt><code>selectors</code></dt>
<dd>一组用来匹配{{domxref("Element")}} <code>baseElement</code>后代元素的选择器<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。</p>
<p>如果没有找到匹配项，返回值为null。</p>
<h3 id="异常">异常</h3>
<dl>
<dt><code>SyntaxError</code></dt>
<dd>指定的选择器无效。</dd>
</dl>
<h2 id="Example" name="Example">例子</h2>
<p>我们来看几个例子。</p>
<h3 id="查找一个具有特殊属性值的元素">查找一个具有特殊属性值的元素</h3>
<p>在第一个例子中，会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的{{HTMLElement("style")}}元素:</p>
<pre class="brush:js">let el = document.body.querySelector("style[type='text/css'], style:not([type])");
</pre>
<h3 id="整个层次结构有效">整个层次结构有效</h3>
<p>下面的例子演示了在应用选择器时考虑整个文档的层次结构, 因此在定位匹配时仍然考虑指定的 <strong>baseElement</strong> 之外的级别。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush:js">var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);</pre>
<h4 id="结果">结果</h4>
<p>结果是像这样的:</p>
<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p>
<p>注意，尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素，选择器"<code>div span</code>"依旧匹配了其中的{{HTMLElement("span")}}元素。 </p>
<h3 id="更多例子">更多例子</h3>
<p> {{domxref("Document.querySelector()")}} 查看更多正确格式选择器的例子。</p>
<h2 id="Notes" name="Notes">规范</h2>
<table>
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td>
<td>{{Spec2('DOM4')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 2')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
<td>{{Spec2('Selectors API Level 1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Element.querySelector")}}</p>
<h2 id="Specification" name="Specification">相关链接</h2>
<ul>
<li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
<li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li>
<li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
<li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
</ul>
|
