上一节:
下一节:

  JavaScript HTML DOM querySelector() 方法

  • HTML DOM querySelector() 方法

    document.querySelector()方法返回与文档中指定的CSS选择器匹配的第一个元素 。
    注意： querySelector()方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用querySelectorAll()方法。如果选择器匹配多次使用的文档中的ID（请注意，“id”在页面中应该是唯一的，并且不应多次使用），它将返回第一个匹配元素。有关CSS选择器的更多信息，请访问我们的 CSS选择器教程和CSS选择器参考。
    实例：
    使用class=“example”获取文档中的第一个元素： 
    document.querySelector(".example");
    尝试一下

  • 浏览器支持

    项 IE/Edge Chrome FireFox Safari Opera
    方法
    querySelector()
    8.0+
    4.0+
    3.5+
    3.2+
    10.0+

  • 语法

    document.querySelector(CSS selectors)

  • 参数值

    参数 类型 描述
    CSS selectors String 必需的。 指定一个或多个与元素匹配的CSS选择器。 这些用于根据ID元素，类，类型，属性，属性值等选择HTML元素。对于多个选择器，使用逗号分隔每个选择器。 返回的元素取决于首先在文档中找到的元素（请参阅“更多示例”）。提示：有关所有CSS选择器的列表，请查看我们的CSS选择器参考。

  • 技术细节

    项目 描述
    返回值： NodeList对象，表示与指定的CSS选择器匹配的第一个元素。如果未找到匹配项，则返回null。如果指定的选择器无效，则抛出SYNTAX_ERR异常。
    DOM版本 Core Level 1

  • 更多例子

    获取文档中的第一个<p>元素： 
    document.querySelector("p");
    尝试一下
    使用class=“example”获取文档中的第一个<p>元素： 
    document.querySelector("p.example");
    尝试一下
    使用id =“demo”更改元素的文本： 
    document.querySelector("#demo").innerHTML = "Hello World!";
    尝试一下
    获取文档中第一个<p>元素，其中父元素是<div>元素。 
    document.querySelector("div > p");
    尝试一下
    获取文档中具有“target”属性的第一个<a>元素： 
    document.querySelector("a[target]");
    尝试一下
    此示例演示了多个选择器的工作方式。假设您有两个元素：<h2>和<h3>元素。以下代码将为文档中的第一个<h2>元素添加背景颜色： 
    <h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";
    尝试一下
    但是，如果<h3>元素放在文档中的<h2>元素之前。<h3>元素将获得红色背景颜色。 
    <h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";
    尝试一下

  • 相关页面

    CSS 教程 CSS 选择器
    CSS 参考 CSS 选择器参考
返回 HTML DOM Document 参考
上一节:
下一节: