Μια εργασία που αντιμετωπίζουν πολύ συχνά οι αρχάριοι προγραμματιστές Javascript είναι η επιλογή ενός στοιχείου σε μια ιστοσελίδα από το χαρακτηριστικό id του.
Ας υποθέσουμε ότι έχουμε κώδικα σε μια σελίδα.
Πώς μπορώ να επιλέξω ένα στοιχείο με το id="elem" και να εκτελέσω κάποιες ενέργειες με αυτό;
Υπάρχουν πολλές επιλογές για την επίλυση του προβλήματος εδώ. Ας τους ρίξουμε μια ματιά τώρα.
Επιλογή 1. Χρήση Μέθοδος Javascript getElementById.
Υπάρχει ένας τρόπος πρόσβασης σε ένα στοιχείο με το αναγνωριστικό του χρησιμοποιώντας "καθαρό" κώδικα javascript, χωρίς τη χρήση βιβλιοθηκών τρίτων. Αυτή η μέθοδος χρησιμοποιεί τη μέθοδο ggetElementById("element_id"). Έτσι, αναφερόμαστε στο στοιχείο που χρειαζόμαστε με το id του.
Ας δούμε πώς λειτουργεί αυτό με ένα απλό παράδειγμα.
Σημειώστε ότι αυτές οι γραμμές κώδικα (script) βρίσκονται κάτω από το ίδιο το στοιχείο. Αυτό είναι απαραίτητη προϋπόθεση για να λειτουργήσει αυτό το σενάριο, γιατί. Ο κώδικας Javascript εκτελείται καθώς φορτώνεται η σελίδα. Αν τοποθετήσουμε τον κώδικα παραπάνω, τότε θα αναφερθούμε σε ένα στοιχείο της σελίδας που δεν έχει φορτωθεί ακόμα, π.χ. δεν θα είναι στον κώδικα τη στιγμή της εκτέλεσης του σεναρίου. Υπάρχουν τρόποι για να αποφευχθεί αυτό, αλλά αυτό είναι πέρα από το πεδίο εφαρμογής αυτού του άρθρου.
Ως αποτέλεσμα, εάν όλα λειτουργούν σωστά, θα εμφανιστεί ένα αναδυόμενο παράθυρο. Αυτό το παράθυρο θα εμφανίσει το κείμενο που βρίσκεται μέσα στο μπλοκ div.
Ας δούμε τώρα πώς μπορούμε να λύσουμε αυτό το πρόβλημα με διαφορετικό τρόπο.
Επιλογή 2. Χρήση της βιβλιοθήκης Jquery.
Η δεύτερη επιλογή για την επιλογή ενός στοιχείου από το αναγνωριστικό του είναι η χρήση της βιβλιοθήκης Jquery. Στην πράξη, στα σύγχρονα σενάρια, αυτή η μέθοδος χρησιμοποιείται συχνότερα. Είναι πολύ πιο βολικό και πιο εύκολο να το θυμάστε.
Για να αναφερθείτε σε ένα στοιχείο με το αναγνωριστικό του, πρέπει να χρησιμοποιήσετε την κατασκευή:
$("#elem")
Εδώ το elem είναι το όνομα που περιέχεται στο χαρακτηριστικό id.
Επειδή θα χρησιμοποιήσουμε τρίτο μέρος Βιβλιοθήκη Javascript, που ονομάζεται Jquery, τότε αυτή η βιβλιοθήκη πρέπει πρώτα να συνδεθεί.
Προστίθεται στην ενότητα
, ένας τρόπος για να γίνει αυτό είναι να προσθέσετε την ακόλουθη γραμμή κώδικα:
Για να φορτωθεί η βιβλιοθήκη, πρέπει να υπάρχει σύνδεση στο Διαδίκτυο.
Το ίδιο το σενάριο, όπως και στο προηγούμενο παράδειγμα, θα πρέπει να βρίσκεται κάτω από τον κωδικό του στοιχείου με το οποίο θέλετε να αλληλεπιδράσετε.
Έτσι, έχουμε αναλύσει δύο τρόπους με τους οποίους μπορείτε να επιλέξετε ένα στοιχείο σε μια ιστοσελίδα από το χαρακτηριστικό id του και να αλληλεπιδράσετε μαζί του. Επιλέξτε τη μέθοδο που σας ταιριάζει και χρησιμοποιήστε την στην πράξη.
Στο τελευταίο μάθημα εξετάστηκε η μέθοδος getElementsByTagName, η οποία επιστρέφει έναν πίνακα ( ομάδα) στοιχεία σελίδας ανά όνομα ετικέτας.
Εδώ συνεχίζεται πρακτική δουλειάμε javascript και θα εξεταστεί η μέθοδος getElementById που είναι επιστρέφει μια αναφορά σε ένα στοιχείο, με βάση το μοναδικό αναγνωριστικό του .
Μέθοδος getElementById, ακριβώς όπως το getElementsByTagName είναι μια μέθοδος του αντικειμένου εγγράφου.
Το όνομα της μεθόδου μεταφράζεται κυριολεκτικά: λήψη στοιχείου με αναγνωριστικό.
Οποιοδήποτε στοιχείο ( tegu) ενός εγγράφου Ιστού μπορεί να εκχωρηθεί το δικό του αναγνωριστικό, χάρη στο οποίο το στοιχείο γίνεται μοναδικόκαι μπορείτε να έχετε πρόσβαση για να εργαστείτε μαζί του.
δώσε προσοχήε: δεν υπάρχει s στο όνομα της μεθόδου στο τέλος της λέξης Element ( σε αντίθεση με τη μέθοδο getElementsByTagName). Αυτό είναι για λόγους ευκολίας και υποδεικνύει ότι η μέθοδος χρησιμοποιείται για την επιλογή του στοιχείου.
Κάποια εξήγηση για το απόσπασμα κώδικα παραπάνω...
- ετικέτα img ( εικόνεςστ) έχει id - το αναγνωριστικό πιγκουίνος ;
- Χρησιμοποιώντας τη μέθοδο getElementById, αυτή η ετικέτα img επιλέγεται από το αναγνωριστικό πιγκουίνου.
- σε μια μεταβλητή μοναδικός εισάγεται σύνδεσμοςστην επιλεγμένη ετικέτα.
- τότε μπορείτε να εργαστείτε με την ετικέτα, όπως με ένα αντικείμενο μέσω μιας μεταβλητήςμοναδικό , ακριβώς όπως η εργασία με το αντικείμενο Date μέσω μιας αυθαίρετης μεταβλητής.
Μετά την πρόσβαση στο στοιχείο ( tegu) ιστοσελίδα ανά αναγνωριστικό χρησιμοποιώντας τη μέθοδο getElementById, εργαζόμαστε ήδη με αυτήν όπως με ένα Αντικείμενο, που σημαίνει ότι έχουμε πρόσβαση στα χαρακτηριστικά της ετικέτας ως ιδιότητες του Αντικειμένου.
Επομένως, οι τιμές των χαρακτηριστικών είναι ήδη τιμές ιδιοκτησίας.
Ας συνεχίσουμε με το προηγούμενο παράδειγμα...
"Συλλογισμένος πιγκουίνος">
Επεξηγήσεις για το παράδειγμα κώδικα...
- ετικέτα img ( εικόνεςστ) έχει ορισμένα χαρακτηριστικά: src - διεύθυνση αρχείου, πλάτος και ύψος - πλάτος και ύψος εικόνας, alt - εναλλακτικό κείμενο.
- έχοντας πρόσβαση στην ετικέτα χρησιμοποιώντας τη μέθοδο getElementById ως αντικείμενο, έχουμε πρόσβαση στα χαρακτηριστικά της ετικέτας, πώς να αντιταχθείτε στις ιδιότητες;
- ΑΛΛΑ τιμές χαρακτηριστικώνείναι τώρα αξίες ιδιοκτησίας;
- στο javascript, οι ιδιότητες αντικειμένων προσεγγίζονται μέσω μιας κουκκίδας. Στη συνέχεια, εμφανίζουμε το alt - το εναλλακτικό κείμενο της ετικέτας img χρησιμοποιώντας τη μέθοδο ειδοποίησης στην οθόνη.
Ελπίζω να μην σας μπερδεύουν όλα αυτά. Πρέπει να κατανοήσετε ταυτόχρονα τι συμβαίνει σε επίπεδο προγράμματος javascript και σε επίπεδο σήμανσης εγγράφων.
Η ετικέτα img είναι ένα μοναδικό αντικείμενο.
Τα χαρακτηριστικά πλάτους και alt της ετικέτας είναι ιδιότητες του Αντικειμένου.
Τιμές χαρακτηριστικών "128" και "Συλλογισμένος πιγκουίνος"είναι αξίες ιδιοκτησίας·
// Δείτε πώς φαίνεται από την άποψη της Javascript:
var μοναδικό = (
πλάτος: "128" ,
alt: "Συλλογισμένος πιγκουίνος"
}
Έτσι λειτουργεί η μέθοδος getElementById, επιστρέφοντας μια αναφορά σε οποιοδήποτε στοιχείο ( ετικέτα) της ιστοσελίδας εάν έχει μοναδικό αναγνωριστικό. Στη συνέχεια, εργαζόμαστε με αυτό το στοιχείο σε επίπεδο Javascript. όπως με ένα αντικείμενο...
Θα πρέπει να ληφθεί υπόψη ότι: όπως και στο προηγούμενο μάθημα, εδώ - όταν εργάζεστε με τη μέθοδο getElementById, η γραμμή κλήσης σεναρίου πρέπει να τοποθετείται στο τέλος του εγγράφου html
Το jQuery παρέχει άλλες επιλογές για την επιλογή στοιχείων ενός εγγράφου Ιστού.
Για να λειτουργήσει το σενάριο με κάποιο στοιχείο της σελίδας, πρέπει πρώτα να βρεθεί αυτό το στοιχείο. Υπάρχουν διάφοροι τρόποι για να το κάνετε αυτό στο JavaScript. Το στοιχείο που βρέθηκε συνήθως εκχωρείται σε μια μεταβλητή και αργότερα, μέσω αυτής της μεταβλητής, το σενάριο αποκτά πρόσβαση στο στοιχείο και εκτελεί ορισμένες ενέργειες με αυτό.
Αναζήτηση με αναγνωριστικό
Εάν δοθεί στο στοιχείο ένα χαρακτηριστικό id στον κώδικα της σελίδας, τότε το στοιχείο μπορεί να βρεθεί από το id. Αυτός είναι ο πιο εύκολος τρόπος. Το στοιχείο αναζητείται χρησιμοποιώντας τη μέθοδο getElementById() του καθολικού αντικειμένου εγγράφου.
document.getElementById(id)
Επιλογές:
id - το αναγνωριστικό του στοιχείου που θα βρεθεί. Το id είναι μια συμβολοσειρά, επομένως πρέπει να είναι σε εισαγωγικά.
Ας δημιουργήσουμε μια σελίδα, να προσθέσουμε ένα στοιχείο σε αυτήν και να της δώσουμε ένα αναγνωριστικό και να βρούμε αυτό το στοιχείο στο σενάριο:
Κώδικας HTML:
JavaScript:
| var block = document.getElementById("block"); αρχείο καταγραφής κονσόλας (μπλοκ); |
Αντιστοιχίσαμε το στοιχείο που βρέθηκε στη μεταβλητή μπλοκ και εμφανίσαμε τη μεταβλητή στην κονσόλα. Ανοίξτε την κονσόλα του προγράμματος περιήγησης, θα πρέπει να περιέχει το στοιχείο.
Δεδομένου ότι η αναζήτηση με αναγνωριστικό είναι ο ευκολότερος και πιο βολικός τρόπος, χρησιμοποιείται συχνά. Εάν πρέπει να εργαστείτε με κάποιο στοιχείο σε ένα σενάριο, τότε το χαρακτηριστικό id ορίζεται για αυτό το στοιχείο στον κώδικα της σελίδας, ακόμα κι αν δεν έχει οριστεί πριν. Και βρείτε το στοιχείο με id.
Αναζήτηση ανά τάξη
Η μέθοδος getElementsByClassName() σάς επιτρέπει να βρείτε όλα τα στοιχεία που ανήκουν σε μια συγκεκριμένη κλάση.
document.getElementsByClassName(class)
Επιλογές:
κλάση - κατηγορία στοιχείων που πρέπει να βρεθούν
Η μέθοδος επιστρέφει έναν ψευδοσυστοιχία που περιέχει τα στοιχεία που βρέθηκαν. Ονομάζεται ψευδοσυστοιχία επειδή πολλές μέθοδοι πίνακα δεν λειτουργούν για αυτόν. Αλλά η κύρια ιδιότητα παραμένει - μπορείτε να ανατρέξετε σε οποιοδήποτε στοιχείο του πίνακα. Ακόμα κι αν βρεθεί μόνο ένα στοιχείο, εξακολουθεί να βρίσκεται στον πίνακα.
Ας προσθέσουμε στοιχεία στη σελίδα και ας τους δώσουμε μια τάξη. Μερικά από τα στοιχεία θα τοποθετηθούν μέσα στο μπλοκ που δημιουργήσαμε νωρίτερα. Το άλλο μέρος θα δημιουργηθεί εκτός του μπλοκ. Το νόημα αυτού θα γίνει σαφές λίγο αργότερα. Τώρα η σελίδα θα μοιάζει με αυτό:
Κώδικας HTML:
JavaScript:
Τώρα βρίσκονται μόνο εκείνα τα στοιχεία που βρίσκονται στο μπλοκ.
Αναζήτηση ανά ετικέτα
Η μέθοδος getElementsByTagName() βρίσκει όλα τα στοιχεία με μια συγκεκριμένη ετικέτα. Επιστρέφει επίσης έναν ψευδοπίνακα με τα στοιχεία που βρέθηκαν.
document.getElementsByTagName (ετικέτα)
Επιλογές:
ετικέτα - ετικέτα στοιχείων προς εύρεση
Ας βρούμε όλες τις ετικέτες p που υπάρχουν στη σελίδα:
| var p = document.getElementsByTagName("p"); αρχείο καταγραφής κονσόλας (p); |
Αυτή η μέθοδος μπορεί επίσης να εφαρμοστεί όχι σε ολόκληρο το έγγραφο, αλλά σε ένα συγκεκριμένο στοιχείο. Βρείτε όλες τις ετικέτες p στο μπλοκ.
Αναζήτηση με επιλογέα
Υπάρχουν μέθοδοι querySelector() και querySelectorAll() που βρίσκουν στοιχεία που ταιριάζουν με έναν δεδομένο επιλογέα. Δηλαδή, θα βρεθούν στοιχεία στα οποία θα είχε εφαρμοστεί το στυλ αν είχε καθοριστεί σε έναν τέτοιο επιλογέα. Ταυτόχρονα, η παρουσία ενός τέτοιου επιλογέα στο στυλ σελίδας δεν είναι καθόλου απαραίτητη. Αυτές οι μέθοδοι δεν έχουν καμία σχέση με το CSS. Η μέθοδος querySelectorAll() βρίσκει όλα τα στοιχεία που ταιριάζουν με τον επιλογέα. Και η μέθοδος querySelector() βρίσκει ένα στοιχείο, το οποίο είναι το πρώτο στοιχείο στον κώδικα της σελίδας. Αυτές οι μέθοδοι μπορούν να αντικαταστήσουν όλους τους τρόπους εύρεσης στοιχείων που συζητήθηκαν προηγουμένως, επειδή υπάρχει ένας επιλογέας αναγνωριστικού, ένας επιλογέας ετικετών και πολλοί άλλοι.
document.querySelector(selector)
document.querySelectorAll(επιλογέας)
Οι επιλογείς γράφονται με τον ίδιο τρόπο όπως στο CSS, απλά μην ξεχάσετε να βάλετε εισαγωγικά.
Ας προσθέσουμε μια λίστα στη σελίδα και ας τη βρούμε από τον επιλογέα. Ψάχνουμε μόνο ένα στοιχείο και ξέρουμε σίγουρα ότι θα είναι το πρώτο, γιατί είναι το μόνο στη σελίδα. Επομένως, σε αυτήν την περίπτωση είναι πιο βολικό να χρησιμοποιήσετε τη μέθοδο querySelector(). Αλλά όταν χρησιμοποιείτε αυτήν τη μέθοδο, πρέπει να λάβετε υπόψη ότι τα ίδια στοιχεία μπορούν να προστεθούν στη σελίδα στο μέλλον. Ωστόσο, αυτό ισχύει για τις περισσότερες μεθόδους.
Κώδικας HTML:
Αυτές οι μέθοδοι μπορούν επίσης να αναζητήσουν στοιχεία όχι σε ολόκληρο το έγγραφο, αλλά σε ένα μόνο στοιχείο.
Στο παράδειγμα, χρησιμοποιήσαμε μόνο επιλογείς ανά ετικέτα. Προσπαθήστε να βρείτε στοιχεία σελίδας χρησιμοποιώντας άλλους επιλογείς.
Παρακείμενα στοιχεία
Για το στοιχείο που βρέθηκε, μπορείτε να βρείτε γείτονες. Κάθε στοιχείο είναι ένα αντικείμενο και γειτονικά στοιχεία μπορούν να ληφθούν μέσω των ιδιοτήτων αυτού του αντικειμένου. Η ιδιότητα previousElementSibling περιέχει το προηγούμενο στοιχείο και η ιδιότητα nextElementSibling περιέχει το επόμενο στοιχείο.
στοιχείο.previousElementSibling
στοιχείο.nextElementSibling
Βρείτε το στοιχείο που ακολουθεί το μπλοκ:
Παιδικά στοιχεία
Η ιδιοκτησία παιδιών περιέχει μια σειρά από παιδιά.
στοιχείο.παιδιά
Ας βρούμε παιδικά στοιχείαΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.
Εκτός από το να επιτρέπουμε στις ιστοσελίδες να επιλέγουν στοιχεία με βάση το αναγνωριστικό τους, μπορούμε επίσης να επιλέξουμε στοιχεία βάσει της ιδιότητάς τους κλάσης.
Το έργο είναι επίσης πολύ κοινό. Όταν γράφω τα σενάρια μου, πρέπει να χρησιμοποιώ αυτόν τον επιλογέα πολύ συχνά.
Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα σε μια σελίδα.
Η εργασία είναι απλή, πρέπει να επιλέξετε ένα στοιχείο με την κλάση class = "elem" και να εκτελέσετε κάποιες ενέργειες με αυτό χρησιμοποιώντας Javascript.
Ας δούμε μερικές επιλογές για το πώς μπορεί να γίνει αυτό.
Επιλογή 1: Χρησιμοποιήστε τη μέθοδο Javascript getElementsByClassName.
Εάν δεν χρησιμοποιείτε πρόσθετες βιβλιοθήκες, τότε μπορείτε να αποκτήσετε πρόσβαση στο στοιχείο χρησιμοποιώντας τη μέθοδο getElementsByClassName("class_name").
Για παράδειγμα, σε σχέση με πηγαίος κώδικας, μπορείτε να προσθέσετε τις ακόλουθες γραμμές κώδικα.
Ως αποτέλεσμα, εάν όλα λειτουργούν σωστά, θα εμφανιστεί ένα αναδυόμενο παράθυρο στο οποίο θα εμφανίζεται το κείμενο που βρίσκεται μέσα στο μπλοκ div.
Λάβετε υπόψη ότι το αποτέλεσμα της εκτέλεσης της μεθόδου getElementsByClassName θα είναι ένας πίνακας στοιχείων. Μπορεί να υπάρχουν πολλά στοιχεία με την ίδια κλάση στη σελίδα.
Γι' αυτό στο τέλος της κατασκευής document.getElementsByClassName("elem"), πρέπει να υποδείξετε ότι εμφανίζεται το μηδενικό στοιχείο του πίνακα (). Η μέτρηση στο Javascript ξεκινά από το μηδέν, όχι από ένα.
Αλλά το πρόβλημα με τη χρήση της μεθόδου getElementsByClassName είναι ότι αυτή η μέθοδος δεν υποστηρίζεται σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης.
Υπάρχουν μερικά κόλπα για να το παρακάμψετε, αλλά είναι περιττός κώδικας. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε κανονικές εκφράσεις:
If(document.getElementsByClassName == απροσδιόριστο) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); για (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };
Αυτός είναι ένας τρόπος να λυθεί το πρόβλημα. Αλλά, για να είμαι ειλικρινής, δεν είναι πολύ αποδεκτό για μένα να φράξω τη σελίδα με περιττό κώδικα, επομένως τις περισσότερες φορές χρησιμοποιώ τη δεύτερη λύση στο πρόβλημα.
Επιλογή 2. Χρήση της βιβλιοθήκης Jquery.
Η χρήση της βιβλιοθήκης Jquery καθιστά πολύ πιο εύκολη την επίλυση του προβλήματος της επιλογής στοιχείων από την ιδιότητα κλάσης τους. Πρέπει να χρησιμοποιήσετε την κατασκευή:
Εδώ το elem είναι το όνομα της κλάσης που έχει εκχωρηθεί στο στοιχείο.
Πρέπει να θυμόμαστε ότι για να λειτουργήσει αυτό, πρέπει πρώτα να συμπεριληφθεί η βιβλιοθήκη Jquery. Προστίθεται στην ενότητα
, ένας τρόπος για να γίνει αυτό είναι να προσθέσετε την ακόλουθη γραμμή κώδικα:Για να φορτωθεί η βιβλιοθήκη, πρέπει να υπάρχει σύνδεση στο Διαδίκτυο.
Ας δούμε πώς λειτουργεί αυτό με ένα παράδειγμα.
Το ίδιο το σενάριο, όπως και στο προηγούμενο παράδειγμα, θα πρέπει να βρίσκεται κάτω από τον κωδικό του στοιχείου με το οποίο θέλετε να αλληλεπιδράσετε.
Έτσι, υπάρχουν δύο τρόποι με τους οποίους μπορείτε να αλληλεπιδράσετε με στοιχεία που έχουν το σύνολο χαρακτηριστικών κλάσης. Επιλέξτε αυτό που σας ταιριάζει καλύτερα και χρησιμοποιήστε το στην πράξη.
Η ιδιότητα ταιριάζει με την καθορισμένη συμβολοσειρά. Δεδομένου ότι τα αναγνωριστικά στοιχείων απαιτείται να είναι μοναδικά εάν καθορίζονται, είναι ένας χρήσιμος τρόπος για γρήγορη πρόσβαση σε ένα συγκεκριμένο στοιχείο.
Εάν πρέπει να αποκτήσετε πρόσβαση σε ένα στοιχείο που δεν έχει αναγνωριστικό, μπορείςχρησιμοποιήστε το querySelector() για να βρείτε το στοιχείο χρησιμοποιώντας οποιονδήποτε επιλογέα.
Σύνταξη
var element = document.getElementById(id);Παράμετροι
id Το αναγνωριστικό του στοιχείου προς εντοπισμό. Το αναγνωριστικό είναι συμβολοσειρά με διάκριση πεζών-κεφαλαίων που είναι μοναδική μέσα στο έγγραφο. μόνο ένα στοιχείο μπορεί να έχει οποιοδήποτε δεδομένο αναγνωριστικό.επιστρεφόμενη τιμή
Ένα αντικείμενο στοιχείου που περιγράφει το αντικείμενο στοιχείου DOM που ταιριάζει με το καθορισμένο αναγνωριστικό ή μηδενικό εάν δεν βρέθηκε αντίστοιχο στοιχείο στο έγγραφο.
παράδειγμα
HTML
Κάποιο κείμενο εδώ
JavaScript
συνάρτηση changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )αποτέλεσμα
Σημειώσεις χρήσης
Η χρήση κεφαλαίων του "Id" στο όνομα αυτής της μεθόδου πρέπεινα είναι σωστό για να λειτουργεί ο κωδικός. getElementByID() είναι δενισχύει και δεν θα λειτουργήσει, όσο φυσικό κι αν φαίνεται.
Σε αντίθεση με ορισμένες άλλες μεθόδους αναζήτησης στοιχείων όπως η Document.querySelector() και η Document.querySelectorAll() , η getElementById() είναι διαθέσιμη μόνο ως μέθοδος του καθολικού αντικειμένου εγγράφου και δενδιαθέσιμη ως μέθοδος σε όλα τα αντικείμενα στοιχείων στο DOM. Επειδή οι τιμές ID πρέπει να είναι μοναδικές σε ολόκληρο το έγγραφο, δεν υπάρχει ανάγκη για"τοπικές" εκδόσεις της συνάρτησης.
παράδειγμα
γεια λέξη 1
γεια λέξη2
γεια λέξη3
γεια λέξη4
Εάν δεν υπάρχει στοιχείο με το δεδομένο αναγνωριστικό, αυτή η συνάρτηση επιστρέφει null. Σημειώστε ότι η παράμετρος id κάνει διάκριση πεζών-κεφαλαίων, οπότε document.getElementById(" Μ ain") θα επιστρέψει null αντί για το στοιχείο
Στοιχεία που δεν περιλαμβάνονται στο έγγραφοδεν αναζητούνται από το getElementById() . Όταν δημιουργείτε ένα στοιχείο και του εκχωρείτε ένα αναγνωριστικό, πρέπει να εισαγάγετε το στοιχείο στο δέντρο εγγράφων με ή μια παρόμοια μέθοδο για να μπορέσετε να αποκτήσετε πρόσβαση σε αυτό με το getElementById():
var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // το el θα είναι μηδενικό!
Έγγραφα που δεν είναι HTML. Η υλοποίηση DOM πρέπει να έχει πληροφορίες που να λένε ποια χαρακτηριστικά είναι τύπου ID. Τα χαρακτηριστικά με το όνομα "id" δεν είναι τύπου ID, εκτός εάν ορίζονται στο DTD του εγγράφου. Το χαρακτηριστικό id ορίζεται ότι είναι τύπου ID στις συνήθεις περιπτώσεις XHTML , XUL και άλλα. Εφαρμογές που δεν γνωρίζουν εάν Τα χαρακτηριστικά είναι τύπου ID ή δεν αναμένεται να επιστρέψουν null.
Προσδιορισμός
| Προσδιορισμός | Κατάσταση | Σχόλιο |
|---|---|---|
| Προδιαγραφές επιπέδου 1 μοντέλου αντικειμένου εγγράφου (DOM). |
Απαρχαιωμένος | Αρχικός ορισμός για τη διεπαφή |
| Μοντέλο αντικειμένου εγγράφου (DOM) Επίπεδο 2 Προδιαγραφή πυρήνα Ο ορισμός του "getElementById" σε αυτήν την προδιαγραφή. |
Απαρχαιωμένος | Αντικαταστήστε το DOM 1 |
| Μοντέλο αντικειμένου εγγράφου (DOM) Επίπεδο 3 Προδιαγραφή πυρήνα Ο ορισμός του "getElementById" σε αυτήν την προδιαγραφή. |
Απαρχαιωμένος | Αντικαταστήστε το DOM 2 |
| DOM Ο ορισμός του "getElementById" σε αυτήν την προδιαγραφή. |
Βιωτικο επιπεδο | Σκοπεύετε να αντικαταστήσετε το DOM 3 |
Συμβατότητα προγράμματος περιήγησης
Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.
Ενημερώστε τα δεδομένα συμβατότητας στο GitHub
| Επιφάνεια εργασίας | Κινητό | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Χρώμιο | άκρη | Firefox | Internet Explorer | ΛΥΡΙΚΗ ΣΚΗΝΗ | σαφάρι | Android webview | Chrome για Android | Firefox για Android | Opera για Android | Safari σε iOS | Samsung Internet | |
| getElementById | Πλήρης υποστήριξη Chrome 1 | Πλήρης υποστήριξη Edge 12 | Πλήρης υποστήριξη Firefox 1 | IE Πλήρης υποστήριξη 5.5 | Πλήρης υποστήριξη Opera 7 | Safari Πλήρης υποστήριξη 1 | WebView Android Πλήρης υποστήριξη Ναι | Πλήρης υποστήριξη Chrome Android 18 | Firefox Android Πλήρης υποστήριξη Ναι | Opera Android Πλήρης υποστήριξη 10.1 | Safari iOS Πλήρης υποστήριξη 1 | Samsung Internet Android ; |