Element.querySelector()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
返回与指定的选择器组匹配的元素的后代的第一个元素。
语法
参数
返回值
基础元素(baseElement)的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行,包括基础元素和他的后代元素的集合以外的元素,也就是说,选择器首先会应用到整个文档,而不是基础元素,来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被 querySelector() 方法返回。
如果没有找到匹配项,返回值为 null。
异常
SyntaxError
-
指定的选择器无效。
例子
我们来看几个例子。
查找一个具有特殊属性值的元素
在第一个例子中,会返回 HTML 文档里第一个没有 type 属性或者有值为“text/css”的 type 属性的<style>
元素:
js
let el = document.body.querySelector(
"style[type='text/css'], style:not([type])",
);
整个层次结构有效
下面的例子演示了在应用选择器时考虑整个文档的层次结构,因此在定位匹配时仍然考虑指定的 baseElement 之外的级别。
HTML
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
js
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
baseElement.querySelector("div span").innerHTML;
结果
结果是像这样的:
更多例子
Document.querySelector()
查看更多正确格式选择器的例子。
规范
Specification |
---|
DOM Standard # ref-for-dom-parentnode-queryselectorall① |
浏览器兼容性
BCD tables only load in the browser