HTML DOM querySelector() 方法

HTML 元素對象參考手冊 元素對象

實例

修改 class="demo" 的 <div> 元素的第一個子元素文本內容：

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

定義與用法

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

注意： querySelector() 方法只返回匹配指定選擇器的第一個元素。如果你要返回所有匹配元素，請使用 querySelectorAll() 方法替代。

對於更多的 CSS 選擇，可以訪問我們的 CSS 選擇器教程 和我們的 CSS 選擇器參考手冊 。

流覽器支持

表格中的數字表示支持該方法的第一個流覽器的版本號。

方法
querySelector() 4.0 8.0 3.5 3.1 10.0

語法

element.querySelector(CSS 選擇器)

參數值

參數 類型 描述
CSS 選擇器 String 必須。指定一個或多個匹配元素的 CSS 選擇器。 可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。

對於多個選擇器，使用逗號隔開，返回一個匹配的元素。

提示： 更多 CSS 選擇器，請參閱我們的 CSS 選擇器參考手冊。

技術細節

DOM 版本: Selectors Level 1 Element Object
返回值: 匹配指定 CSS 選擇器的第一個元素。 如果沒有找到，返回 null。如果指定了非法選擇器則 拋出 SYNTAX_ERR 異常。

更多實例

實例

修改 <div> 元素中的第一個 <p> 元素內容：

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


實例

修改 <div> 元素中第一個 class="example" 的子元素內容：

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


實例

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

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


實例

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

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


實例

以下實例演示了多個選擇器的使用方法。

假定你選擇了兩個選擇器: <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";

但是，如果 <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";


相關頁面

JavaScript 參考手冊: document.querySelector()

HTML 元素對象參考手冊 元素對象