返回与指定的选择器组匹配的元素的后代的第一个元素。
语法
element = baseElement.querySelector(selectors);
参数
返回值
基础元素(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);
结果
结果是像这样的:
更多例子
Document.querySelector()
查看更多正确格式选择器的例子。
规范
规范 | Status | Comment |
---|---|---|
DOM4 querySelectorAll() |
Obsolete | |
Selectors API Level 2 querySelectorAll() |
Obsolete | |
Selectors API Level 1 querySelectorAll() |
Obsolete |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.