Monimutkaiset DOM-elementin valitsimet JavaScriptissä

Tehdään jotain monimutkaisempaa. Olkoon meillä esimerkiksi seuraava HTML-koodi:

<div id="parent">
	<input>
</div>

Haetaan viite input-kenttään, joka sijaitsee #parent -lohkon sisällä:

let elem = document.querySelector('#parent input');
console.log(elem);

Kuten näette, saimme input-kenttämme valitsimella #parent input. Itse asiassa tähän CSS-valitsimeen osuvat kaikki #parent:n sisällä olevat input-kentät.

Olkoon meillä esimerkiksi kaksi tällaista input-kenttää:

<div id="parent">
	<input value="1">
	<input value="2">
</div>

Jos kirjoitat CSS-koodiin valitsimen #parent input, se vaikuttaa molempiin input-kenttiimme:

#parent input {
	color: red;
}

querySelector -metodi ei kuitenkaan toimi näin. Se hakee aina vain yhden elementin - ensimmäisen, joka vastaa määriteltyä valitsinta. Katsotaanpa esimerkkiä. Olkoon meillä input-kenttiä, joilla on luokka elem:

<input class="elem">
<input class="elem">

Haetaan ensimmäinen näistä input-kentistä:

let elem = document.querySelector('.elem');
console.log(elem); // tässä on ensimmäinen input-kenttä

Annettu seuraava HTML:

<div id="block">
	<p>1</p>
	<p>2</p>
</div>

Hae viite ensimmäiseen kappaleeseen div-elementistä, jolla on id, joka on block.

Annettu seuraava HTML:

<div class="block">
	<p>1</p>
	<p>2</p>
</div>

Hae viite ensimmäiseen kappaleeseen div-elementistä, jolla on luokka block.

Annettu seuraava HTML:

<p class="www">text</p>
<p class="www">text</p>

Hae viite ensimmäiseen kappaleeseen, jolla on luokka www.