Σύνθετοι Επιλογείς (Selectors) στοιχείων DOM στην JavaScript

Ας κάνουμε κάτι πιο σύνθετο. Ας υποθέσουμε, για παράδειγμα, ότι έχουμε τον ακόλουθο κώδικα HTML:

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

Ας πάρουμε μια αναφορά στο πεδίο εισαγωγής που βρίσκεται μέσα στο μπλοκ #parent:

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

Όπως βλέπετε, πήραμε το πεδίο εισαγωγής μας από τον επιλογέα #parent input. Στην πραγματικότητα, αυτός ο CSS επιλογέας αντιστοιχεί σε όλα τα πεδία εισαγωγής που βρίσκονται μέσα στο #parent.

Ας υποθέσουμε, για παράδειγμα, ότι έχουμε δύο τέτοια πεδία εισαγωγής:

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

Τότε, εάν γράψετε τον επιλογέα #parent input στον κώδικα CSS, θα επηρεάσει και τα δύο πεδία εισαγωγής μας:

css#parent input {
  color: red;
}

Ωστόσο, η μέθοδος querySelector δεν λειτουργεί με αυτόν τον τρόπο. Πάντα λαμβάνει μόνο ένα στοιχείο - το πρώτο που ταιριάζει με τον καθορισμένο επιλογέα. Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε πεδία εισαγωγής με την κλάση elem:

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

Ας πάρουμε το πρώτο από αυτά τα πεδία εισαγωγής:

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // εδώ θα είναι το πρώτο πεδίο εισαγωγής

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">κείμενο</p>
<p class="www">κείμενο</p>