HTML Διαδραστικό Στοιχείο querySelectorAll() Μέθοδος

Ορισμός και χρήση

querySelectorAll() Η μέθοδος επιστρέφει μια συλλογή των απογόνων των στοιχείων που ταιριάζουν στον καθορισμένο CSS επιλογέα, ως στατική συλλογή NodeList.

NodeList

Το NodeList είναι μια συλλογή κλάσεων που μοιάζουν με πίνακα (λίστα).

Οι κόμβοι στη λίστα μπορούν να προσπελάονται μέσω του δείκτη (index). Ο δείκτης ξεκινά από 0.

Η ιδιότητα length μπορεί να επιστρέψει τον αριθμό των κόμβων στη λίστα.

Για περισσότερες πληροφορίες, δείτε:

Εγχειρίδιο αναφοράς:

Προσδιορισμός classList

Προσδιορισμός className

Μέθοδος querySelector()

Μέθοδος getElementsByTagName()

Μέθοδος getElementsByClassName()

Όνυμα Style HTML DOM

Εκμάθηση:

Γλώσσα CSS

Επιλογέας CSS

Εγχειρίδιο Επιλογέα CSS

Επίδειξη

Παράδειγμα 1

Ρύθμιση του χρώματος του ορίου του πρώτου στοιχείου class="example" μέσα στο στοιχείο <div> ως φόντο:

// Εύρεση του στοιχείου με id="myDIV" (div), και στη συνέχεια εύρεση όλων των στοιχείων με class="example" μέσα στο div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Ρύθμιση του χρώματος του ορίου του πρώτου στοιχείου (index 0) class="example" μέσα στο div
x[0].style.backgroundColor = "red";

Προσπαθήστε το شخصικά

Συμβουλή:Περισσότερες παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα

element.querySelectorAll(cssSelectors)

Παράμετροι

Παράμετροι Περιγραφή
cssSelectors

Απαιτείται. Διάγραμμα. Καθορίζει έναν ή περισσότερους επιλογείς CSS για την ταιριάξιση στοιχείων.

Οι επιλογείς CSS χρησιμοποιούνται για την επιλογή στοιχείων HTML με βάση το id, την κλάση, τον τύπο, τις ιδιότητες, τις τιμές των ιδιοτήτων κ.λπ.

Για πολλαπλούς επιλογείς, διαχωρίστε κάθε επιλογέα με κόμμα.

Συμβουλή:Για μια λίστα με όλους τους επιλογείς CSS, παρακαλώ δείτε το Εγχειρίδιο Επιλογέα CSS.

Τεχνικά λεπτομέρειες

Αποτελεσματικός

Το NodeList αντικείμενο αντιπροσωπεύει όλους τους απογόνους στοιχείων που ταιριάζουν στον καθορισμένο CSS επιλογέα.

Το NodeList είναι μια στατική συλλογή, που σημαίνει ότι οι αλλαγές στο DOM δεν επηρεάζουν τη συλλογή.

Σημείωση:Αν ο καθορισμένος επιλογέας είναι μη έγκυρος, τότε εκπέμπει την εξαιρετική SYNTAX_ERR
Έκδοση DOM: Document Object Selectors Level 1

Περισσότερες παραδείγματα

Παράδειγμα 2

Εύρεση όλων των στοιχείων <p> μέσα στο στοιχείο <div>, και ρύθμιση του χρώματος του ορίου του πρώτου στοιχείου (index 0) ως φόντο:

// Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων p εντός div:
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Ρύθμιση της χρώματος του ορίου του πρώτου στοιχείου <p> (index 0) μέσα στο div
x[0].style.backgroundColor = "red";

Προσπαθήστε το شخصικά

Παράδειγμα 3

Εύρεση όλων των στοιχείων <p> με class="example" μέσα στο <div>, και ρύθμιση του ορίου του πρώτου στοιχείου <p> ως φόντο:

// Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων p με class="example" εντός div:
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Ορισμός του χρώματος φόντου του πρώτου στοιχείου p (index 0) με class="example" στο div:
x[0].style.backgroundColor = "red";

Προσπαθήστε το شخصικά

Παράδειγμα 4

Βρήκατε πόσα στοιχεία class="example" υπάρχουν στο στοιχείο <div> (χρησιμοποιώντας την ιδιότητα length του NodeList αντικειμένου):

/* Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων p με class="example" εντός div, επιστροφή του αριθμού των ευρεθέντων στοιχείων */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Προσπαθήστε το شخصικά

Παράδειγμα 5

Ορισμός του χρώματος φόντου όλων των στοιχείων class="example" στο στοιχείο <div>:

// Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων class="example" εντός div:
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Δημιουργία κύκλου for και ορισμός του χρώματος φόντου όλων των στοιχείων class="example" στο div:
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Προσπαθήστε το شخصικά

Παράδειγμα 6

Ορισμός του χρώματος φόντου όλων των στοιχείων <p> στο στοιχείο <div>:

// Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων p εντός div:
var x = document.getElementById("myDIV").querySelectorAll("p");
// Δημιουργία κύκλου for και ορισμός του χρώματος φόντου όλων των στοιχείων p στο div:
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Προσπαθήστε το شخصικά

Παράδειγμα 7

Ορισμός του στυλ πλαισίου για όλα τα στοιχεία <a> με την ιδιότητα target στο στοιχείο <div>:

// Εύρεση του στοιχείου (div) με το id="myDIV", και στη συνέχεια εύρεση όλων των στοιχείων <a> με την ιδιότητα "target"
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Δημιουργία γύρω και ρύθμιση του περιγράμματος για όλα τα στοιχεία <a> με ιδιότητα target στο div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Προσπαθήστε το شخصικά

Παράδειγμα 8

Ρύθμιση του χρώματος φόντου όλων των στοιχείων <h2>, <div> και <span> στο <div>:

// Λήψη στοιχείου με id="myDIV" (div) και από αυτό το div, λήψη όλων των στοιχείων <h2>, <div> και <span>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Δημιουργία γύρω και ρύθμιση του χρώματος φόντου όλων των στοιχείων <h2>, <div> και <span> στο <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Προσπαθήστε το شخصικά

Υποστήριξη περιηγητή

Τα αριθμήματα στη τάβλη αναφέρουν την έκδοση του πρώτου περιηγητή που υποστηρίζει αυτή τη μέθοδο.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Σημείωση:O Internet Explorer 8 υποστηρίζει τους επιλογείς CSS2. Οι εκδόσεις IE9 και υψηλότερες υποστηρίζουν επίσης CSS3.

Σχετικές σελίδες

Εκμάθηση CSS:Επιλογέας CSS

Εγχειρίδιο CSS:Εγχειρίδιο Επιλογέα CSS

Εκμάθηση JavaScript:Λίστα Νόμων JavaScript HTML DOM

Εγχειρίδιο JavaScript:element.querySelector()

Εγχειρίδιο HTML DOM:document.querySelectorAll()