JavaScript'te DOM Öğesinin Karmaşık Seçicileri

Hadi biraz daha karmaşık bir şey yapalım. Örneğin, şu şekilde bir HTML kodumuz olduğunu varsayalım:

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

Hadi, #parent bloğunun içindeki input'a bir referans alalım:

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

Gördüğünüz gibi, input'umuzu #parent input seçici ile aldık. Aslında bu CSS seçicisi, #parent içindeki tüm input'ları seçer.

Örneğin, iki tane böyle input'unuz olduğunu varsayalım:

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

O zaman, CSS kodunda #parent input seçicisini yazarsak, her iki input'umuzu da etkileyecektir:

#parent input {
	color: red;
}

Ancak, querySelector metodu böyle çalışmaz. Her zaman yalnızca bir öğe döndürür - belirtilen seçiciye uyan ilk öğeyi. Hadi bir örnekle görelim. Diyelim ki elem sınıfına sahip input'larımız var:

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

Hadi bu input'lardan ilkini alalım:

let elem = document.querySelector('.elem');
console.log(elem); // burada ilk input olacak

Aşağıdaki HTML verilmiştir:

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

id değeri block olan div'in içindeki ilk paragrafa bir referans alın.

Aşağıdaki HTML verilmiştir:

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

block sınıfına sahip div'in içindeki ilk paragrafa bir referans alın.

Aşağıdaki HTML verilmiştir:

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

www sınıfına sahip ilk paragrafa bir referans alın.