HTML DOM Element querySelector() 方法

定義和用法

querySelector() 方法返回與元素的指定 CSS 選擇器匹配的第一個子元素。

注意：

querySelector() 方法只返回與指定選擇器匹配的第一個元素。如需返回所有匹配項，請改用 querySelectorAll() 方法。

另請參閱：

參考手冊：

classList 屬性

className 屬性

querySelectorAll() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style 對象

教程：

CSS 語法

CSS 選擇器

CSS 選擇器參考手冊

實例

例子 1

更改 <div> 元素中 class="example" 的第一個子元素的文本：

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

親自試一試

頁面下方提供更多實例。

語法

element.querySelector(CSSselectors)

參數

參數 描述
CSSselectors

必需。字符串。指定一個或多個 CSS 選擇器來匹配元素。

CSS 選擇器用于根據 id、類、類型、屬性、屬性值等來選擇 HTML 元素。

對于多個選擇器，請用逗號分隔每個選擇器。

返回的元素取決于首先在文檔中找到的元素（請參閱下方的“更多實例”）。

提示：如需完整的 CSS 選擇器列表，請查看我們的 CSS 選擇器參考手冊。

技術細節

返回值：

匹配指定 CSS 選擇器的第一個元素。

如果沒有找到匹配項，則返回 null。

如果指定的選擇器無效，則拋出 SYNTAX_ERR 異常。
DOM 版本： Selectors Level 1 Element Object

更多實例

例子 2

更改 <div> 元素中第一個 <p> 元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

親自試一試

例子 3

更改 <div> 元素中 class="example" 的第一個 <p> 元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

親自試一試

例子 4

更改 <div> 元素中 id="demo" 的元素的文本：

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

親自試一試

例子 5

為 <div> 元素內設置 target 屬性的第一個 <a> 元素添加紅色邊框：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

親自試一試

例子 6

此例演示多個選擇器是如何工作的。

假設您有兩個元素：<h2> 和 <h3> 元素。

以下代碼將為 <div> 中的第一個 <h2> 元素添加背景顏色：

<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";

親自試一試

例子 7

但是，如果 <div> 中的 <h3> 元素放置在 <h2> 元素之前。<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";

親自試一試

瀏覽器支持

表中的數字注明了首個完全支持該方法的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

相關頁面

CSS 教程：CSS 選擇器

CSS 參考手冊：CSS 選擇器參考手冊

JavaScript 教程：JavaScript HTML DOM Node List

JavaScript 參考手冊：document.querySelector()

JavaScript 參考手冊：element.querySelectorAll()

HTML DOM 參考手冊：document.querySelectorAll()