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:

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

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

javascriptlet 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:

html<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:

css#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:

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

Hadi bu input'lardan ilkini alalım:

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

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

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

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