From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/api/element/queryselector/index.html | 132 +++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/zh-cn/web/api/element/queryselector/index.html (limited to 'files/zh-cn/web/api/element/queryselector') diff --git a/files/zh-cn/web/api/element/queryselector/index.html b/files/zh-cn/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..340fd3b9b1 --- /dev/null +++ b/files/zh-cn/web/api/element/queryselector/index.html @@ -0,0 +1,132 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +tags: + - Element.querySelector() +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +
返回与指定的选择器组匹配的元素的后代的第一个元素。
+ +

语法

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

参数

+ +
+
selectors
+
一组用来匹配{{domxref("Element")}} baseElement后代元素的选择器selectors；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。
+
+ +

返回值

+ +

基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。

+ +

如果没有找到匹配项，返回值为null。

+ +

异常

+ +
+
SyntaxError
+
指定的选择器无效。
+
+ +

例子

+ +

我们来看几个例子。

+ +

查找一个具有特殊属性值的元素

+ +

在第一个例子中，会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的{{HTMLElement("style")}}元素:

+ +
let el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

整个层次结构有效

+ +

下面的例子演示了在应用选择器时考虑整个文档的层次结构, 因此在定位匹配时仍然考虑指定的 baseElement 之外的级别。

+ +

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>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

结果

+ +

结果是像这样的:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

注意，尽管基础元素没有包括选择器中含有的 {{domxref("div")}} 元素，选择器"div span"依旧匹配了其中的{{HTMLElement("span")}}元素。 

+ +

更多例子

+ +

 {{domxref("Document.querySelector()")}} 查看更多正确格式选择器的例子。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范StatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("api.Element.querySelector")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf