HTML DOM Element querySelector() 方法

Määritelmä ja käyttö

querySelector() Menetelmä palauttaa ensimmäisen lapsen elementin, joka vastaa määritettyä CSS-valitsinta.

Huomaa:

querySelector() Menetelmä palauttaa vain ensimmäisen määritetyn valitsimen mukaisen elementin. Jos haluat palauttaa kaikki vastaavat kohteet, käytä sen sijaan: querySelectorAll() -menetelmä.

Katso myös:

Viittausopas:

classList -ominaisuus

className -ominaisuus

querySelectorAll() -menetelmä

getElementsByTagName() -menetelmä

getElementsByClassName() -menetelmä

HTML DOM Style-objekti

Ohje:

CSS-kieli

CSS-valitsimet

CSS-valitsimien viittomakirja

Esimerkki

Esimerkki 1

Muuta ensimmäisen lapsen teksti <div> -elementissä, jossa class="example":

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

Kokeile itse

Lisää esimerkkejä sivun alalta.

Syntaksi

element.querySelector(CSSselectors)

Parametrit

Parametrit Kuvaus
CSSselectors

Välttämätön. Merkkijono. Määritä yksi tai useampi CSS-valitsin elementin määrittämiseksi.

CSS-valitsimet käytetään HTML-elementtien valitsemiseen id:n, luokan, tyypin, ominaisuuksien ja niiden arvojen perusteella.

Useita valitsimia varten erottelkaa valitsimet pilkulla.

Palautettu elementti riippuu ensimmäisestä elementistä, joka löytyy dokumentista (katso alapuoliset "Lisää esimerkkejä").

Vinkki:Täydellinen CSS-valitsinlista löytyy: CSS-valitsimien viittomakirja.

Tekninen yksityiskohta

Palautusarvo:

Määrittää ensimmäisen CSS-valitsimen mukaisen elementin.

Jos sopivia kohteita ei löydy, palauttaa null.

Jos määritetty valitsin on epäsyntynyt, heittää SYNTAX_ERR-poikkeuksen.
DOM-versio: Valitsimet Taso 1 Elementtiobjekti

Lisää esimerkkejä

Esimerkki 2

Muuta ensimmäisen <p> -elementin teksti <div> -elementissä:

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

Kokeile itse

Esimerkki 3

Muuta ensimmäisen <p> -elementin teksti <div> -elementissä, jossa class="example":

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

Kokeile itse

Esimerkki 4

Muuta <div> -elementin id="demo" -ominaisuuden tekstin:

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

Kokeile itse

Esimerkki 5

Lisää punainen reunus ensimmäiselle <a> -elementille, jolla on target-ominaisuus <div> -elementin sisällä:

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

Kokeile itse

Esimerkki 6

Tämä esimerkki näyttää, miten useat valitsimet toimivat.

Oletetaan, että sinulla on kaksi elementtiä: <h2> ja <h3> -elementit.

Seuraava koodi lisää taustavärin ensimmäiseen <h2> -elementtiin <div> -elementin sisällä:

<div id="myDIV">
  <h2>A h2 elementti</h2>
  <h3>A h3 elementti</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kokeile itse

Esimerkki 7

Mutta jos <div> -elementin sisällä oleva <h3> -elementti sijoitetaan <h2> -elementin eteen, <h3> -elementti saa punaisen taustavärin.

<div id="myDIV">
  <h3>A h3 elementti</h3>
  <h2>A h2 elementti</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä menetelmää täysin.

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

Liittyvät sivut

CSS-opas:CSS-valitsimet

CSS -viittausoppikirja:CSS-valitsimien viittomakirja

JavaScript-opas:JavaScript HTML DOM Node List

JavaScript -viittausoppikirja:document.querySelector()

JavaScript -viittausoppikirja:element.querySelectorAll()

HTML DOM -viittausoppikirja:document.querySelectorAll()