Σε διάφορες περιπτώσεις, οι προγραμματιστές πρέπει να πάρουν το στοιχείο HTML με το χαρακτηριστικό name. Ας υποθέσουμε ότι ο προγραμματιστής θέλει να αποκτήσει πρόσβαση σε ένα στοιχείο ελέγχου φόρμας, όπως ένα κουμπί επιλογής ή ένα πλαίσιο ελέγχου, προκειμένου να διαβάσει ή να χειριστεί την τιμή του. Πιο συγκεκριμένα, το « όνομα Το χαρακτηριστικό ' χρησιμοποιείται για την ομαδοποίηση των σχετικών στοιχείων ελέγχου φόρμας και το ίδιο όνομα μπορεί να δοθεί σε πολλά στοιχεία ελέγχου, επιτρέποντάς τους να έχουν πρόσβαση ως μια ενιαία ομάδα.
Αυτή η ανάρτηση θα απεικονίσει τις μεθόδους για την ανάκτηση ενός στοιχείου HTML με όνομα σε JavaScript.
Πώς να λάβετε στοιχεία με όνομα στο JavaScript;
Στο JavaScript, μπορείτε να αποκτήσετε πρόσβαση σε ένα στοιχείο HTML χρησιμοποιώντας το χαρακτηριστικό του ονόματος με τη βοήθεια των ακόλουθων προκαθορισμένων μεθόδων JavaScript:
-
- Μέθοδος getElementsByName().
- Μέθοδος querySelectorAll().
Μέθοδος 1: Λήψη στοιχείου κατά όνομα χρησιμοποιώντας τη μέθοδο 'getElementsByName()'
Για να λάβετε το στοιχείο HTML με το όνομα, χρησιμοποιήστε το ' getElementsByName() μέθοδος. Αυτή η μέθοδος δίνει μια συλλογή στοιχείων που έχουν το καθορισμένο χαρακτηριστικό name.
Σύνταξη
Η ακόλουθη σύνταξη χρησιμοποιείται για τη μέθοδο getElementsByName():
document.getElementsByName ( 'όνομα' )
Παράδειγμα
Πρώτα, δημιουργήστε έξι κουμπιά. Πέντε από αυτούς έχουν « όνομα ' χαρακτηριστικό που χρησιμοποιείται για τη λήψη του στοιχείου HTML ' κουμπί '. Επισυνάψτε το συμβάν onclick με το έκτο κουμπί που θα καλέσει το ' applicationStyle() Λειτουργία για το στυλ των πέντε κουμπιών:
< κουμπί όνομα = 'btn' > Κουμπί κουμπί >< κουμπί όνομα = 'btn' > Κουμπί κουμπί >
< κουμπί όνομα = 'btn' > Κουμπί κουμπί >
< κουμπί όνομα = 'btn' > Κουμπί κουμπί >
< κουμπί όνομα = 'btn' > Κουμπί κουμπί > < br >< br >
< κουμπί onclick = 'applyStyle()' > Κάντε κλικ ΕΔΩ κουμπί >
Ορίστε μια συνάρτηση ' applicationStyle() ' που θα ενεργοποιήσει το κλικ στο κουμπί και θα αλλάξει το χρώμα φόντου όλων των κουμπιών. Για να το κάνετε αυτό, πρώτα λάβετε όλα τα ' κουμπί ' στοιχεία ως ομάδα καλώντας το ' getElementsByName() 'μέθοδος:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Όπως μπορείτε να δείτε στην έξοδο κάνοντας κλικ στο κουμπί, το χρώμα φόντου των πέντε κουμπιών θα αλλάξει:
Μέθοδος 2: Λήψη στοιχείου κατά όνομα χρησιμοποιώντας τη μέθοδο 'querySelectorAll()'
Μπορείτε επίσης να χρησιμοποιήσετε το ' querySelectorAll() ' μέθοδος για τη λήψη στοιχείων χρησιμοποιώντας το ' όνομα ” χαρακτηριστικό στο JavaScript. Αυτή η μέθοδος χρησιμοποιείται για την ανάκτηση όλων των στοιχείων σε ένα έγγραφο που ταιριάζει με έναν καθορισμένο επιλογέα/χαρακτηριστικό, όπως κλάση CSS, αναγνωριστικό ή όνομα.
Σύνταξη
Η δεδομένη σύνταξη χρησιμοποιείται για τη λήψη του στοιχείου με το όνομα χρησιμοποιώντας το ' querySelectorAll()' μέθοδος:
document.querySelectorAll ( '[]' ) ;
Παράδειγμα
Στο παρακάτω παράδειγμα, θα αλλάξουμε το χρώμα μόνο εκείνων των κουμπιών των οποίων το όνομα είναι ' btn1 ”:
< div >< όνομα κουμπιού = 'btn' > Κουμπί κουμπί >
< όνομα κουμπιού = 'btn1' > Κουμπί κουμπί >
< όνομα κουμπιού = 'btn' > Κουμπί κουμπί >
< όνομα κουμπιού = 'btn1' > Κουμπί κουμπί >
< όνομα κουμπιού = 'btn' > Κουμπί κουμπί > < br >< br >
< κουμπί onclick = 'applyStyle()' > Κάντε κλικ ΕΔΩ κουμπί >
div >
Στην καθορισμένη συνάρτηση, θα καλέσουμε πρώτα την πρόσβαση όλα τα στοιχεία κουμπιού των οποίων το όνομα είναι ' btn1 ” και μετά εφαρμόστε στυλ σε αυτό:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Η δεδομένη έξοδος σημαίνει ότι μόνο δύο κουμπιά έχουν αλλάξει το χρώμα φόντου τους, το όνομα του οποίου είναι 'btn1':
Σημείωση: Εάν θέλετε να λάβετε ένα μεμονωμένο στοιχείο, συνιστάται να χρησιμοποιήσετε το document.querySelector αντί για το document.querySelectorAll.
συμπέρασμα
Για να λάβετε ή να ανακτήσετε ένα στοιχείο με όνομα, χρησιμοποιήστε το ' getElementsByName() 'ή το ' querySelectorAll() μεθόδους. Η πιο συχνά και αποτελεσματικά χρησιμοποιούμενη μέθοδος για την απόκτηση του στοιχείου με το όνομα είναι η μέθοδος 'getElementsByName()'. Αυτή η ανάρτηση επεξηγεί τις μεθόδους για την ανάκτηση ενός στοιχείου HTML με το όνομα στο JavaScript.