例
改变一个带有class =“示例”的第一个子元素的文本<div>元素：
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML
= "Hello World!"; 试一试» 更多"Try it Yourself"下面的例子。
定义和用法
所述querySelector()方法返回在指定CSS相符的第一个子元素selector(s)的元素的。
注意： querySelector()方法仅返回指定选择器相匹配的第一个元素。 要返回所有匹配，使用querySelectorAll()方法来代替。
有关CSS选择的更多信息，请访问我们的CSS选择器教程和我们的CSS选择参考 。
浏览器支持
在表中的数字规定，完全支持方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelector() | 4 | 8 | 3.5 | 3.2 | 10.0 |
句法
element .querySelector( CSS selectors )参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS selectors | String | 需要。 指定一个或多个CSS选择器来匹配元素。 这些用于基于它们的ID，类类型，属性，属性值等来选择HTML元素 对于多个选择器，每个选择用逗号分开。 返回元件取决于哪个元件首先被在文档中找到(See "More Examples") 提示：对于所有的CSS选择列表，看看我们的CSS选择参考 。 |
技术细节
| DOM版本： | 选择1级元素对象 |
|---|---|
| 返回值： | 指定的CSS匹配的第一个元件selector(s) 如果没有找到匹配，则返回null。 引发一个例外SYNTAX_ERR如果指定的selector(s)是无效的。 |
更多示例
例
改变所述第一文本<p>在一个元件<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML
= "Hello World!"; 试一试» 例
改变所述第一文本<p>在带有class =“例如”元素<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML
= "Hello World!"; 试一试» 例
改变元素的文本ID为在=“演示” <div>元素：
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML
= "Hello World!";
试一试» 例
红色边框添加到第一个<a>具有内部目标属性元素<div>元素：
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border
= "10px solid red"; 试一试» 例
这个例子演示了如何选择多个工作。
假定有两个元素：一个<h2>和<h3>元素。
下面的代码将添加背景颜色到所述第一<h2>在元件<div>
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2,
h3").style.backgroundColor = "red"; 试一试» 然而，如果<h3>元件被放置在之前<h2>在元件<div> 所述<h3>元件是一个将得到的红色的背景色。
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2,
h3").style.backgroundColor = "red"; 试一试» 相关页面
CSS教程： CSS选择器
CSS参考： CSS选择器参考
JavaScript的教程： JavaScript的HTML DOM节点列表
javascript参考： 文件。 querySelector()
javascript参考： 元素 。 querySelectorAll()
HTML DOM参考： 文件。 querySelectorAll()