Ποιοι είναι οι διαφορετικοί τρόποι επιλογής στοιχείων DOM στο JavaScript

Αυτό το σεμινάριο θα δείξει τις διαφορετικές μεθόδους για την επιλογή στοιχείων DOM σε JavaScript.

Ποιοι είναι οι διαφορετικοί τρόποι επιλογής στοιχείων DOM στο JavaScript;

Χρησιμοποιήστε τις ακόλουθες μεθόδους για την επιλογή στοιχείων DOM σε JavaScript:

• μέθοδος getElementById().
• μέθοδος getElementsByClassName().
• μέθοδος getElementsByTagName().
• μέθοδος querySelector().
• μέθοδος querySelectorAll().

Μέθοδος 1: Επιλέξτε στοιχεία DOM χρησιμοποιώντας τη μέθοδο 'getElementById()'.

Για την επιλογή στοιχείων DOM χρησιμοποιήστε το ' getElementById() ' μέθοδος που βασίζεται στο εκχωρημένο αναγνωριστικό του στοιχείου. Αυτή η μέθοδος επιλέγει ένα μεμονωμένο στοιχείο με βάση το μοναδικό ' ταυτότητα ' Χαρακτηριστικό. Δίνει μια αναφορά στο στοιχείο με το καθορισμένο αναγνωριστικό και επιστρέφει ' μηδενικό ' εάν δεν βρεθεί αντίστοιχο στοιχείο.

Σύνταξη

Χρησιμοποιήστε την παρακάτω σύνταξη για τη μέθοδο getElementById():

Εδώ, το « idName ” είναι το όνομα ενός χαρακτηριστικού id που έχει εκχωρηθεί σε ένα στοιχείο.

Παράδειγμα

Σε ένα αρχείο HTML, δημιουργήστε δύο επικεφαλίδες σε ένα στοιχείο div χρησιμοποιώντας το ' h4 ετικέτα '. Εκχωρήστε αναγνωριστικά στο στοιχείο div και τις επικεφαλίδες 'h4' στοιχεία με το όνομα ' div ' και ' επικεφαλίδα », αντίστοιχα. Προσθέστε το χαρακτηριστικό στυλ στο στοιχείο div για να το ευθυγραμμίσετε στο κέντρο. Επίσης, ορίστε μια τάξη ' Ενότητα ” στη δεύτερη επικεφαλίδα που αλλάζει το χρώμα της:

Τώρα, θα πάρουμε το ' div ' στοιχείο χρησιμοποιώντας το αναγνωριστικό που του έχει εκχωρηθεί με τη βοήθεια του ' getElementById() 'μέθοδος:

Εκτυπώστε το στοιχείο έναντι του αναγνωριστικού ' div ” στην κονσόλα:

Μπορεί να φανεί ότι το απαιτούμενο στοιχείο HTML έχει ανακτηθεί με επιτυχία:

Μέθοδος 2: Επιλέξτε στοιχεία DOM χρησιμοποιώντας τη μέθοδο 'getElementsByClassName()'

Μπορείτε επίσης να επιλέξετε το στοιχείο DOM χρησιμοποιώντας την κλάση που του έχει εκχωρηθεί με τη βοήθεια του ' getElementsByClassName() 'μέθοδος. Επιλέγει μια λίστα στοιχείων με το όνομα της κλάσης τους. Εξάγει ένα ζωντανό αντικείμενο HTMLCollection, ένα αντικείμενο που μοιάζει με πίνακα που περιέχει όλα τα στοιχεία με το καθορισμένο όνομα κλάσης.

Σύνταξη

Η ακόλουθη σύνταξη χρησιμοποιείται για τη μέθοδο 'getElementsByClassName()':

Παράδειγμα

Εδώ, θα λάβουμε το στοιχείο που περιέχει την κλάση ' Ενότητα ” και εκτυπώστε στην κονσόλα:

Όπως μπορείτε να δείτε στην έξοδο, επέστρεψε ένας πίνακας μήκους 1 που περιέχει ένα στοιχείο ' h4 «Ποιος ανήκει στην τάξη» Ενότητα ”:

Μέθοδος 3: Επιλέξτε στοιχεία DOM χρησιμοποιώντας τη μέθοδο 'getElementsByTagName()'

Σε περίπτωση που δεν έχει εκχωρηθεί αναγνωριστικό ή κλάση σε ένα στοιχείο, χρησιμοποιήστε το ' getElementsByTagName() ' μέθοδος για να πάρετε το στοιχείο με το όνομα της ετικέτας. Επιστρέφει επίσης ένα ζωντανό αντικείμενο HTMLCollection, το οποίο είναι ένα αντικείμενο που μοιάζει με πίνακα και περιέχει όλα τα στοιχεία που έχουν το καθορισμένο όνομα ετικέτας.

Σύνταξη

Ακολουθήστε τη δεδομένη σύνταξη για την επιλογή στοιχείων με βάση το όνομα της ετικέτας:

Παράδειγμα

Επικαλέστε τη μέθοδο 'getElementsByTagName()' περνώντας το όνομα της ετικέτας ' h4 '. Στη συνέχεια, εκτυπώστε τη λίστα των στοιχείων που ταιριάζει με το καθορισμένο όνομα ετικέτας στην κονσόλα:

Παραγωγή

Μέθοδος 4: Επιλέξτε στοιχεία DOM χρησιμοποιώντας τη μέθοδο 'querySelector()'.

Χρησιμοποιήστε το ' querySelector() ' μέθοδος λήψης του στοιχείου DOM. Επιλέγει ένα μεμονωμένο στοιχείο που ταιριάζει με έναν καθορισμένο επιλογέα CSS. Επιστρέφει το πρώτο στοιχείο που αντιστοιχεί στο έγγραφο. Εάν κανένα στοιχείο δεν ταιριάζει, δίνει ' μηδενικό '.

Σύνταξη

Η παρακάτω αναφερόμενη σύνταξη χρησιμοποιείται για τη μέθοδο 'querySelector()':

Εδώ, το χαρακτηριστικό είναι ένας επιλογέας CSS, όπως ένα αναγνωριστικό ή μια κλάση ως ' #η ταυτότητά μου '' .η τάξη μου '.

Παράδειγμα

Καλέστε τη μέθοδο 'querySelector()' και περάστε το αναγνωριστικό ' #επικεφαλίδα ” για να λάβετε τα στοιχεία που περιέχουν το ίδιο αναγνωριστικό:

Δίνει το πρώτο αντιστοιχισμένο στοιχείο ως έξοδο:

Μέθοδος 5: Επιλέξτε στοιχεία DOM χρησιμοποιώντας τη μέθοδο 'querySelectorAll()'.

Εάν θέλετε να επιλέξετε όλα τα στοιχεία που περιέχουν το καθορισμένο χαρακτηριστικό (id ή class), χρησιμοποιήστε το ' querySelectorAll() μέθοδος. Επιλέγει μια λίστα στοιχείων που ταιριάζουν με έναν συγκεκριμένο καθορισμένο επιλογέα CSS. Δίνει ένα αντικείμενο NodeList που περιέχει όλα τα στοιχεία του εγγράφου που αντιστοιχούν στον συγκεκριμένο επιλογέα CSS.

Σύνταξη

Χρησιμοποιήστε την ακόλουθη σύνταξη για να λάβετε τη λίστα των στοιχείων:

Παράδειγμα

Για να λάβετε τη λίστα του αντιστοιχισμένου στοιχείου που περιέχει το αναγνωριστικό ' επικεφαλίδα ' με την ' querySelectorAll() ' μέθοδος και εκτύπωση σε στοιχεία στην κονσόλα:

Παραγωγή

Αυτό αφορά την επιλογή στοιχείων DOM σε JavaScript.

συμπέρασμα

Για την επιλογή των στοιχείων DOM σε JavaScript, χρησιμοποιήστε το ' getElementById() », « getElementsByClassName() », « getElementsByTagName() », « querySelector() ', ή το ' querySelectorAll() 'μέθοδος. Αυτές οι μέθοδοι παρέχουν διαφορετικούς τρόπους επιλογής στοιχείων από το DOM με βάση τα μοναδικά αναγνωριστικά, τα ονόματα κλάσεων, τα ονόματα ετικετών ή τους επιλογείς CSS. Αυτό το σεμινάριο παρουσίασε τις διαφορετικές μεθόδους για την επιλογή στοιχείων DOM σε JavaScript.