Στο JavaScript, το ' querySelectorAll() Η μέθοδος ' ανακτά το πρώτο στοιχείο που ταιριάζει ακριβώς με τους καθορισμένους επιλογείς CSS. Αυτή η μέθοδος ξεκινά τη διέλευση του δέντρου DOM για να εκτελέσει αυτήν την εργασία. Μόλις εντοπιστεί το στοιχείο, εφαρμόζει τις ενσωματωμένες ιδιότητες JavaScript ή μεθόδους που ορίζονται στην ενότητα σεναρίου για την εκτέλεση ειδικών εργασιών. Αυτή η μέθοδος χρησιμοποιείται συνήθως για την επιλογή των στοχευμένων στοιχείων σύμφωνα με τις απαιτήσεις. Επιτρέπει στους χρήστες να επιλέξουν όλα τα στοιχεία που ταιριάζουν με τον καθορισμένο επιλογέα ή το συγκεκριμένο που τοποθετείται στο δεδομένο ευρετήριο.
Αυτός ο οδηγός επεξηγεί τη χρήση της μεθόδου 'querySelectorAll()' σε JavaScript.
Πώς να χρησιμοποιήσετε τη μέθοδο 'querySelectorAll()' σε JavaScript;
Για να χρησιμοποιήσετε το « querySelectorAll() », καθορίστε τον επιλογέα CSS ως όρισμα. Οι επιλογείς CSS περιλαμβάνουν 'Τύπος, Τάξη και Αναγνωριστικό'. Εάν ο επιλογέας CSS δεν είναι έγκυρος, επιστρέφει ένα συντακτικό σφάλμα, διαφορετικά, επιστρέφει ένα στατικό αντικείμενο NodeList ως τυπική έξοδο.
Σύνταξη
document.querySelectorAll ( Επιλογείς CSS )
Στην παραπάνω σύνταξη, το « Επιλογείς CSS Ανατρέξτε σε όλους τους έγκυρους επιλογείς CSS.
Ας χρησιμοποιήσουμε πρακτικά τη σύνταξη που ορίστηκε παραπάνω.
Κώδικας HTML
Επισκόπηση του δεδομένου κώδικα HTML:
< h2 τάξη = 'διαδήλωση' > Πρώτη επικεφαλίδα h2 >< h3 τάξη = 'διαδήλωση' > Δεύτερη επικεφαλίδα h3 >
< Π τάξη = 'διαδήλωση' > Πρώτη παράγραφος Π >
< Π τάξη = 'διαδήλωση' > Δεύτερη παράγραφος Π >
< κουμπί στο κλικ = 'jsFunc()' > Κάντε κλικ ΕΔΩ ! κουμπί >
Στις παραπάνω γραμμές κώδικα:
- Ο ' Η ετικέτα προσθέτει έναν υπότιτλο με την κλάση 'demo'.
- Ο ' Η ετικέτα ορίζει μια δεύτερη υποκεφαλίδα με την ίδια κλάση που ονομάζεται 'demo'.
- Ο ' Οι ετικέτες ενσωματώνουν τις δηλώσεις παραγράφου που έχουν την ίδια κλάση, π.χ., 'demo'.
- Ο ' <κουμπί> Η ετικέτα περιλαμβάνει ένα νέο κουμπί με ένα συμβάν του ποντικιού 'onclick' για την εκτέλεση της συνάρτησης 'jsFunc()'.
Σημείωση: Ο συγκεκριμένος κώδικας HTML ακολουθείται σε αυτόν τον οδηγό.
Παράδειγμα 1: Εφαρμογή της μεθόδου 'querySelectorAll()' σε επιλογή στοιχείων που έχουν την ίδια κλάση και αλλαγή των χρωμάτων τους
Αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο 'querySelectorAll()' για να επιλέξει όλα τα στοιχεία που χρησιμοποιούν την κλάση 'demo'.
Κώδικας JavaScript
Ας δούμε γενικά τον παρακάτω κώδικα:
< γραφή >λειτουργία jsFunc ( ) {
const list = document.querySelectorAll ( '.διαδήλωση' ) ;
Για ( αφήνω i = 0 ; Εγώ < λίστα.μήκος; i++ ) {
λίστα [ Εγώ ] .στυλ.χρώμα = 'πορτοκαλοκόκκινο' ;
}
}
γραφή >
Στις παραπάνω γραμμές κώδικα:
- Ο ' jsFunc() ' ορίζεται η λειτουργία.
- Στον ορισμό της, η μεταβλητή 'list' χρησιμοποιεί το ' querySelectorAll() ' μέθοδος επιλογής όλων των στοιχείων που έχουν την κλάση 'demo'.
- Στη συνέχεια, το « Για ' Ο βρόχος προετοιμάζει μια λίστα κόμβων για επανάληψη κατά μήκος όλων των στοιχείων HTML που έχουν βρεθεί με την κλάση ' διαδήλωση ' και αλλάξτε το χρώμα του κειμένου τους χρησιμοποιώντας το ' στυλ.χρώμα ” ιδιοκτησία.
Παραγωγή
Στην παραπάνω έξοδο, μπορεί να φανεί ότι το χρώμα κειμένου των στοιχείων που περιλαμβάνουν το ίδιο όνομα κλάσης, δηλ. 'demo' αλλάζει με το πάτημα του κουμπιού.
Παράδειγμα 2: Εφαρμογή της μεθόδου 'querySelectorAll()' για την επιλογή των συγκεκριμένων στοιχείων ευρετηρίου
Εκτός από όλα τα στοιχεία, ο χρήστης μπορεί επίσης να επιλέξει το συγκεκριμένο ευρετηριασμένο στοιχείο που έχει την κλάση «demo».
Κώδικας JavaScript
Εξετάστε τον δεδομένο κώδικα JavaScript:
< γραφή >λειτουργία jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
λίστα [ 0 ] .στυλ.χρώμα = 'πράσινος' ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Η μεταβλητή 'list' επιλέγει το στοιχείο 'h2' του οποίου η κλάση είναι 'demo' με τη βοήθεια του ' querySelectorAll() 'μέθοδος.
- Μετά από αυτό, η μεταβλητή 'list' καθορίζει το ευρετήριο του στοιχείου 'h2' για να αλλάξει το χρώμα κειμένου του στοιχείου 'H2' που τοποθετείται στο ευρετήριο '0'.
Παραγωγή
Η έξοδος δείχνει ότι το χρώμα κειμένου του στοιχείου 'H2' που τοποθετείται σε μηδενικό δείκτη έχει αλλάξει την κλάση 'demo' με το πάτημα του κουμπιού.
Παράδειγμα 3: Εφαρμογή της μεθόδου 'querySelectorAll()' για να λάβετε τον αριθμό των στοιχείων που έχουν την ίδια κλάση
Αυτό το παράδειγμα ανακτά τον αριθμό των στοιχείων που έχουν την ίδια κλάση χρησιμοποιώντας τη μέθοδο 'querySelectorAll()'.
Κώδικας HTML
Αρχικά, ρίξτε μια ματιά στον τροποποιημένο κώδικα HTML του 'Παράδειγμα 1':
< Π ταυτότητα = 'Για' Π >
Στον προαναφερθέντα κώδικα HTML, προσθέστε μια κενή παράγραφο με ένα αναγνωριστικό 'para' στο τέλος του κώδικα HTML 'Παράδειγμα 1'.
Κώδικας JavaScript
Τώρα, συνεχίστε με τον κώδικα JavaScript:
< γραφή >λειτουργία jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'Για' ) .innerHTML = nodelist.length;
}
γραφή >
Σύμφωνα με το παραπάνω απόσπασμα κώδικα:
- Η συνάρτηση 'jsFunc()' επιλέγει πρώτα όλα τα στοιχεία '
' χρησιμοποιώντας το ' querySelectorAll() 'μέθοδος.
- Μετά από αυτό, το « getElementById() Η μέθοδος έχει πρόσβαση στην προστιθέμενη κενή παράγραφο μέσω του αναγνωριστικού της 'para' για να την προσαρτήσει με την επιστρεφόμενη τιμή της εφαρμοσμένης ιδιότητας 'length'.
Παραγωγή
Όπως φαίνεται, η παραπάνω έξοδος εμφανίζει ένα σύνολο «4» στοιχείων που ταιριάζουν με το καθορισμένο «demo» του επιλογέα κλάσης CSS.
συμπέρασμα
Ο ' querySelectorAll() Η μέθοδος μπορεί να χρησιμοποιηθεί εύκολα καθορίζοντας τον επιλογέα CSS ως τιμή του. Αυτή η μέθοδος ταιριάζει με κάθε στοιχείο HTML και επιλέγει αυτά που ταιριάζουν με τον καθορισμένο επιλογέα. Μόλις επιλεγούν τα στοιχεία, εκτελεί την απαιτούμενη εργασία σε αυτά που ορίζονται στην ενότητα του σεναρίου. Αυτός ο οδηγός επεξηγεί εν συντομία τη χρήση της μεθόδου 'querySelectorAll()' σε JavaScript.