这篇翻译不完整。请帮忙从英语翻译这篇文章

返回与指定的选择器组匹配的元素的后代的第一个元素。

语法

element = baseElement.querySelector(selectors);
  • elementbaseElementelement 对象.
  • selectors 是一个CSS选择器字符串( selectors )

参数

selectors
一组用来匹配Element baseElement后代元素的选择器selectors;必须是合法的css选择器,否则会引起语法错误。返回匹配指定选择器的第一个元素。

返回值

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

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

异常

SyntaxError
指定的选择器无效。

例子

我们来看几个例子。

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

在第一个例子中,会返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的<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);

结果

结果是像这样的:

注意,尽管基础元素没有包括选择器中含有的 div 元素,选择器"div span"依旧匹配了其中的<span>元素。 

更多例子

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

规范

规范 Status Comment
DOM4
querySelectorAll()
Obsolete  
Selectors API Level 2
querySelectorAll()
Obsolete  
Selectors API Level 1
querySelectorAll()
Obsolete  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 9
Full support 9
Partial support 8
Notes
Notes querySelector() is supported, but only for CSS 2.1 selectors.
Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

相关链接

文档标签和贡献者

最后编辑者: zhuangyin,