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

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

语法

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  

浏览器兼容性

浏览器 支持 备注
Internet Explorer 8 CSS 2.1 selectors only (IE8)
Firefox (Gecko) 3.5 (1.9.1)  
Opera 10  
Chrome 1  
Safari (webkit) 3.2 (525.3) webk.it/16587

相关链接

文档标签和贡献者

 最后编辑者: nicole-li,