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

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

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

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

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

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

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

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

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

#parent input {
	color: red;
}

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

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

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

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

Δίνεται το ακόλουθο HTML:

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

Λάβετε μια αναφορά στην πρώτη παράγραφο από το div με id ίσο με block.

Δίνεται το ακόλουθο HTML:

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

Λάβετε μια αναφορά στην πρώτη παράγραφο από το div με κλάση block.

Δίνεται το ακόλουθο HTML:

<p class="www">κείμενο</p>
<p class="www">κείμενο</p>

Λάβετε μια αναφορά στην πρώτη παράγραφο με κλάση www.