Metodong querySelector() ng HTML DOM Element

Pagsasakop at Paggamit

querySelector() Ang method ay tumutugon sa unang anak na elemento na tumugma sa tinukoy na CSS selector ng elemento.

Babala:

querySelector() Ang method ay tumutugon lamang sa unang elemento na tumugma sa tinukoy na selector. Para sa ibang lahat na tumugma, gamitin ang querySelectorAll() Method.

Tingnan din:

Manwal ng Pagkilala:

classList Attribute

className Attribute

querySelectorAll() Method

getElementsByTagName() Method

getElementsByClassName() Method

Object ng Style sa HTML DOM

Tuturo:

CSS 语法

CSS 选择器

CSS 选择器参考手册

Mga halimbawa

Mga halimbawa 1

Ibaguhin ang teksto ng unang anak na elemento na may class="example" sa <div> elemento:

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

Subukan ang iyong sarili

Mga halimbawa pangkaibigan sa ibaba ng pahina.

Katuruan

element.querySelector(CSSselectors)

Parameter

Parameter Paglalarawan
CSSselectors

Mahalaga. String. Tukuyin ang isang o maraming CSS selector upang magkakatugma sa elemento.

CSS selector ay ginagamit upang piliin ang mga HTML elemento ayon sa id, class, uri, attribute, halaga ng attribute at iba pa.

Para sa maraming selector, maghihiwalay ng bawat selector ng pamitak.

Ang elemento na ibabalik ay depende sa unang elemento na natagpuan sa dokumento (tingnan ang "Higit pang mga halimbawa" sa ibaba).

Mga Paalala:Para sa kumpletong listahan ng CSS selector, tingnan ang aming CSS 选择器参考手册.

Detalye ng Teknolohiya

Halimbawa ng bunga:

Tumugon sa unang elemento na tumugma sa tinukoy na CSS selector.

Bumalik sa null kapag walang magamit na katugma.

Huhulog ang SYNTAX_ERR exception kapag ang tinukoy na selector ay hindi magagamit.
Versyon ng DOM: Element Object na may Level 1 Selectors

Higit pang mga halimbawa

Mga halimbawa 2

Ibaguhin ang teksto ng unang <p> elemento sa <div> elemento:

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

Subukan ang iyong sarili

Mga halimbawa 3

Ibaguhin ang teksto ng unang <p> elemento na may class="example" sa <div> elemento:

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

Subukan ang iyong sarili

Mga halimbawa 4

Ibaguhin ang teksto ng elemento na may id="demo" sa <div> elemento:

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

Subukan ang iyong sarili

Halimbawa 5

Magdagdag ng kulay red na border sa unang <a> element na nagtatakda ng target property sa loob ng <div> element.

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

Subukan ang iyong sarili

Halimbawa 6

Ang halimbawa na ito ay nagpapakita kung paano gumagana ang ilang selector.

Humingi ng hinihiling, mayroon kang dalawang element: ang <h2> at <h3> element.

Ang sumusunod na kodigo ay magdadagdag ng kulay background sa unang <h2> element sa <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";

Subukan ang iyong sarili

Halimbawa 7

Ngunit, kung ang <h3> element sa <div> ay ilagay bago ang <h2> element, ang <h3> element ay makakakuha ng kulay red na background.

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

Subukan ang iyong sarili

Browser Support

Ang numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa paraan.

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

Kaugnay na Pahina

Tuturo sa CSS:CSS 选择器

CSS Reference Manual:CSS 选择器参考手册

Tuturo sa JavaScript:JavaScript HTML DOM NodeList

JavaScript Reference Manual:document.querySelector()

JavaScript Reference Manual:element.querySelectorAll()

HTML DOM Reference Manual:document.querySelectorAll()