HTML DOM querySelector() 方法

2018-10-18 17:34 更新

HTML DOM querySelector() 方法

HTML 元素對(duì)象參考手冊(cè) 元素對(duì)象

實(shí)例

修改 id="demo" 的 <div>元素的第一個(gè)子元素文本內(nèi)容:

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

嘗試一下 ?

定義與用法

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

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

對(duì)于更多的 CSS 選擇,可以訪問(wèn)我們的 CSS 選擇器參考手冊(cè)


瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

方法          
querySelector() 4.0 8.0 3.5 3.1 10.0


語(yǔ)法

element.querySelector(CSS 選擇器)

參數(shù)值

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

對(duì)于多個(gè)選擇器,使用逗號(hào)隔開,返回一個(gè)匹配的元素。

提示: 更多 CSS 選擇器,請(qǐng)參閱我們的 CSS 選擇器參考手冊(cè)。

技術(shù)細(xì)節(jié)

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


更多實(shí)例

實(shí)例

修改 <div> 元素中的第一個(gè) <p> 元素內(nèi)容:

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

嘗試一下 ?

實(shí)例

修改 <div> 元素中第一個(gè) class="example" 的子元素內(nèi)容:

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

嘗試一下 ?

實(shí)例

修改 <div> 元素中第一個(gè) class="example" 的 <p> 元素:

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

嘗試一下 ?

實(shí)例

為 <div> 元素中的第一個(gè)有 target 屬性的 <a> 元素添加紅色邊框:

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

嘗試一下 ?

實(shí)例

以下實(shí)例演示了多個(gè)選擇器的使用方法。

假定你選擇了兩個(gè)選擇器: <h2> 和 <h3> 元素。

以下代碼將為 <div> 元素的第一個(gè) <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> 元素將會(huì)被設(shè)置指定的背景顏色。

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

嘗試一下 ?


相關(guān)頁(yè)面

JavaScript 參考手冊(cè): document.querySelector()


HTML 元素對(duì)象參考手冊(cè) 元素對(duì)象

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)