QuerySelector()
Βασικά, το querySelector() χρησιμοποιείται με το 'this.template' που ανακτά τα στοιχεία που υπάρχουν σε ένα συγκεκριμένο πρότυπο. Εάν υπάρχουν πολλά στοιχεία, θα εξετάσει μόνο το πρώτο στοιχείο. Το Null επιστρέφεται εάν το καθορισμένο στοιχείο δεν υπάρχει στο πρότυπο. Παίρνει τον επιλογέα ως παράμετρο. Αυτή μπορεί να είναι η ετικέτα ονόματος τάξης. Το αναγνωριστικό δεν θα υποστηρίζεται. Σε ορισμένες περιπτώσεις, έχετε τις ίδιες κλάσεις αλλά διαφορετικές τιμές. Σε αυτό το σενάριο, πρέπει να χρησιμοποιήσουμε το data-recid που λαμβάνει τα στοιχεία με βάση την τιμή.
Σύνταξη:
Ας δούμε πώς να καθορίσετε τον επιλογέα μέσα στο querySelector().
- this.template.querySelector(selector)
- this.template.querySelector('[data-recid='value']')
Για παράδειγμα: εάν ο επιλογέας είναι ετικέτα h1, θα πρέπει να τον ορίσετε ως 'h1'.
1. Όλα τα παραδείγματα χρησιμοποιούν αυτό το αρχείο 'meta.xml'. Δεν θα το διευκρινίσουμε αυτό σε κάθε παράδειγμα. Τα στοιχεία LWC μπορούν να προστεθούν στη σελίδα εγγραφής, τη σελίδα εφαρμογής ή την αρχική σελίδα.
'1.0' ?>
<στόχοι>
2. Σε όλα τα παραδείγματα που πρόκειται να συζητήσουμε σε αυτόν τον οδηγό, το Logic παρέχεται ως κώδικας «js». Μετά από αυτό, καθορίζουμε το στιγμιότυπο οθόνης που περιλαμβάνει ολόκληρο τον κώδικα 'js'.
Παράδειγμα 1:
Αρχικά, δημιουργούμε τις ετικέτες h1, div, span και lightning-button με κάποιο κείμενο στο αρχείο HTML. Επίσης, δημιουργούμε ένα κουμπί που λαμβάνει τα προηγούμενα στοιχεία όταν πατηθεί. Στο αρχείο “js”, επιστρέφουμε το innerText και των τεσσάρων αυτών στοιχείων μέσω αυτής.template.querySelector().
firstExample.html
<πρότυπο><παραλλαγή αστραπής = 'Στενός' τίτλος = 'Γειά σου' εικόνισμα- όνομα = 'standard:account' >
< h1 > Γεια σας LinuxHint. Είμαι στο h1 < / h1 >
< div > Γεια σας LinuxHint. Είμαι σε div < / div >
< σπιθαμή > Γεια σας LinuxHint. Είμαι στο διάστημα < / σπιθαμή >
<κεραυνός-εισαγωγή τύπος = 'κείμενο' παραλαγή = 'πρότυπο' όνομα = 'όνομα' επιγραφή = 'εισαγωγή κειμένου' >
Γεια σας LinuxHint. Είμαι σε αστραπιαία εισαγωγή < / κεραυνός-εισόδου>
<παραλλαγή αστραπής = 'βάση' επιγραφή = 'Λήψη λεπτομερειών' στο κλικ = { λάβετε λεπτομέρειες } >< / αστραπή>
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
λάβετε λεπτομέρειες ( ) {// Λάβετε το εσωτερικό κείμενο της ετικέτας h1.
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( 'h1' ) . innerText ) ;
// Λάβετε το εσωτερικό κείμενο της ετικέτας div.
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( 'div' ) . innerText ) ;
// Λάβετε το εσωτερικό κείμενο της ετικέτας span.
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( 'σπιθαμή' ) . innerText ) ;
// Λάβετε το εσωτερικό κείμενο της εισαγωγής αστραπής.
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( 'εισαγωγή αστραπής' ) . innerText ) ;
}
Ολόκληρος ο κωδικός:
Παραγωγή:
Προσθέστε αυτό το στοιχείο στη σελίδα 'Εγγραφή' οποιουδήποτε αντικειμένου (το προσθέσαμε στη σελίδα Εγγραφή λογαριασμού). Επιθεωρήστε αυτό το παράθυρο και μεταβείτε στην καρτέλα 'Κονσόλα'.
Τώρα, κάντε κλικ στο κουμπί 'Λήψη λεπτομερειών'. Μετά από αυτό, θα δείτε ότι το innerText εμφανίζεται στην κονσόλα για όλα τα στοιχεία.
Παράδειγμα 2:
Χρησιμοποιήστε το στοιχείο που συζητείται στο Παράδειγμα 1. Καθορίστε τα δύο στοιχεία με την ετικέτα 'h1' στο στοιχείο HTML και χρησιμοποιήστε το querySelector() στο αρχείο 'js' για να λάβετε το innerText του 'h1'.
firstExample.html
<πρότυπο><παραλλαγή αστραπής = 'Στενός' τίτλος = 'Γειά σου' εικόνισμα- όνομα = 'standard:account' >
< h1 > Γεια σας LinuxHint. Είμαι πρώτος h1 < / h1 >
< h1 > Γεια σας LinuxHint. Είμαι δεύτερος h1 < / h1 >
<παραλλαγή αστραπής = 'βάση' επιγραφή = 'Λήψη λεπτομερειών' στο κλικ = { λάβετε λεπτομέρειες } >< / αστραπή>
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
λάβετε λεπτομέρειες ( ) {// Λάβετε το εσωτερικό κείμενο της ετικέτας h1.
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( 'h1' ) . innerText ) ;
}
Ολόκληρος ο κωδικός:
Παραγωγή:
Υπάρχουν δύο στοιχεία με την ίδια ετικέτα. Έτσι, το querySelector() επιλέγει μόνο το πρώτο στοιχείο. Όταν κάνετε κλικ στο κουμπί 'Λήψη λεπτομερειών', θα δείτε το πρώτο 'h1' και το εσωτερικό κείμενο επιστρέφεται στην κονσόλα.
Παράδειγμα 3:
Μπορούμε επίσης να αποθηκεύσουμε το querySelector() σε μια μεταβλητή και να χρησιμοποιήσουμε αυτή τη μεταβλητή για να λάβουμε το innerText. Ας δημιουργήσουμε μια ετικέτα span με λίγο κείμενο και ας επιστρέψουμε το innerText στην κονσόλα, αποθηκεύοντάς το σε μια μεταβλητή.
firstExample.html
<πρότυπο><παραλλαγή αστραπής = 'Στενός' τίτλος = 'Γειά σου' εικόνισμα- όνομα = 'standard:account' >
< σπιθαμή > Γεια σας LinuxHint. είμαι span < / σπιθαμή >< br >
<παραλλαγή αστραπής = 'βάση' επιγραφή = 'Λήψη λεπτομερειών' στο κλικ = { λάβετε λεπτομέρειες } >< / αστραπή>
< / αστραπή-κάρτα>
< / πρότυπο>
firstExample.js
λάβετε λεπτομέρειες ( ) {// Λάβετε το εσωτερικό κείμενο της ετικέτας span.
άφησε τον = Αυτό . πρότυπο . querySelector ( 'σπιθαμή' ) . innerText
κονσόλα. κούτσουρο ( αυτός ) ;
}
Ολόκληρος ο κωδικός:
Παραγωγή:
Παράδειγμα 4:
Σε αυτό το παράδειγμα, δημιουργούμε ένα κουμπί και εισάγουμε κείμενο (είσοδος αστραπής) που θα λάβει το θέμα ως συμβολοσειρά. Περνάμε το “lightning-input” ως επιλογέα στη μέθοδο querySelector(). Εκχωρείται στη μεταβλητή 'computer_related'. Με το πάτημα αυτού του κουμπιού, εμφανίζεται η τιμή που υπάρχει σε αυτή τη μεταβλητή.
secondExample.html
<πρότυπο><αστραπή-κάρτα τίτλος = 'Θέμα' >
< κέντρο >
<κεραυνός-εισαγωγή επιγραφή = 'Εισαγωγή θέματος' αξία = { που σχετίζονται με τον υπολογιστή } >< / κεραυνός-εισόδου>
< Π > Το θέμα σας είναι: < σι > {computer_related} < / σι > < / Π >
< / κέντρο >
<κουμπί αστραπής επιγραφή = 'Επιλέξτε εδώ' στο κλικ = { handleSubject } >< / αστραπή>
< / αστραπή-κάρτα>
< / πρότυπο>
secondExample.js
που σχετίζονται με τον υπολογιστήhandleSubject ( Εκδήλωση ) {
Αυτό . που σχετίζονται με τον υπολογιστή = Αυτό . πρότυπο . querySelector ( 'εισαγωγή κεραυνού' ) . αξία ;
}
Ολόκληρος ο κωδικός:
Παραγωγή:
Παράδειγμα 5:
Εδώ, χρησιμοποιούμε το data-recid. Ας δημιουργήσουμε ένα κουμπί με τρεις ετικέτες span με recid ως 'Span1', 'Span2' και 'Span3' στο αρχείο HTML. Επιλέξτε το πρώτο διάστημα περνώντας το 'Span1' στο data-recid στο querySelector().
thirdExample.html
<πρότυπο><αστραπή-κάρτα τίτλος = 'Αναγνώριση με βάση το αναγνωριστικό δεδομένων' >
< σπιθαμή data-recid = 'Span1' > Είμαι στο span-1 < / σπιθαμή >< br >
< σπιθαμή data-recid = 'Span2' > Είμαι στο span-2 < / σπιθαμή >< br >
< σπιθαμή data-recid = 'Span3' > Είμαι στο span-3 < / σπιθαμή >< br >
<παραλλαγή αστραπής = 'βάση' επιγραφή = 'Λήψη λεπτομερειών' στο κλικ = { λάβετε λεπτομέρειες } >< / αστραπή>
< / αστραπή-κάρτα>
< / πρότυπο>
thirdExample.js
λάβετε λεπτομέρειες ( ) {// Λάβετε το innerText του Span1
κονσόλα. κούτσουρο ( Αυτό . πρότυπο . querySelector ( '[data-recid='Span1']' ) . innerText ) ;
}
Ολόκληρος ο κωδικός:
Παραγωγή:
συμπέρασμα
Μάθαμε πώς να χρησιμοποιούμε το querySelector() για πρόσβαση στα στοιχεία DOM. Το querySelector() χρησιμοποίησε το 'this.template' για να επιλέξει τα στοιχεία στο τρέχον πρότυπο. Μπορεί να είναι δυνατό να το αποθηκεύσετε σε μια μεταβλητή ή να το χρησιμοποιήσετε απευθείας. Και τα δύο αυτά αναφέρονται με παραδείγματα. Επίσης, δώσαμε ένα παράδειγμα που περιλαμβάνει πολλά στοιχεία. Σε αυτήν την περίπτωση, το querySelector() επιστρέφει το πρώτο στοιχείο.