Σε αυτό το μάθημα, θα δούμε τι είναι το DOM, γιατί χρειάζεται και πώς κατασκευάζεται.

Τι είναι το DOM;

Το πρόγραμμα περιήγησης, όταν ζητά μια σελίδα και λαμβάνει τον πηγαίο κώδικα HTML ως απόκριση από τον διακομιστή, πρέπει πρώτα να την αναλύσει. Κατά τη διαδικασία ανάλυσης και ανάλυσης κώδικα HTML, το πρόγραμμα περιήγησης δημιουργεί ένα δέντρο DOM με βάση αυτό.

Μετά την εκτέλεση αυτής της ενέργειας και ορισμένων άλλων, το πρόγραμμα περιήγησης προχωρά στην απόδοση της σελίδας. Σε αυτή τη διαδικασία, φυσικά, χρησιμοποιεί ήδη το δέντρο DOM που δημιούργησε, όχι την αρχική HTML.

Το DOM είναι το μοντέλο αντικειμένου εγγράφου που δημιουργεί το πρόγραμμα περιήγησης στη μνήμη του υπολογιστή με βάση τον κώδικα HTML που λαμβάνει από τον διακομιστή.

Για να το θέσω απλά, ο κώδικας HTML είναι το κείμενο μιας σελίδας και το DOM είναι ένα σύνολο σχετικών αντικειμένων που δημιουργούνται από το πρόγραμμα περιήγησης κατά την ανάλυση του κειμένου του.

Στο Chrome, ο πηγαίος κώδικας της σελίδας που λαμβάνει το πρόγραμμα περιήγησης μπορεί να προβληθεί στην καρτέλα "Πηγή" στον πίνακα "Εργαλεία προγραμματιστή Ιστού".


Στο Chrome, δεν υπάρχει εργαλείο που να μπορεί να χρησιμοποιηθεί για την προβολή του δέντρου DOM που έχει δημιουργήσει. Αλλά υπάρχει μια αναπαράσταση αυτού του δέντρου DOM με τη μορφή κώδικα HTML, είναι διαθέσιμο στην καρτέλα "Στοιχεία". Αυτή η αναπαράσταση DOM είναι, φυσικά, πολύ πιο βολική για να συνεργαστεί ένας προγραμματιστής ιστού. Επομένως, δεν υπάρχει εργαλείο που να αντιπροσωπεύει το DOM με τη μορφή δενδρικής δομής.


Τα αντικείμενα σε αυτό το μοντέλο σχηματίζονται από σχεδόν οτιδήποτε υπάρχει σε HTML (ετικέτες, περιεχόμενο κειμένου, σχόλια, κ.λπ.), συμπεριλαμβανομένου του ίδιου του εγγράφου. Οι σχέσεις μεταξύ αυτών των αντικειμένων στο μοντέλο διαμορφώνονται με βάση το πώς Τα στοιχεία HTML βρίσκονται στον κώδικα μεταξύ τους.

Σε αυτήν την περίπτωση, το DOM του εγγράφου μετά τον σχηματισμό του μπορεί να αλλάξει. Όταν αλλάζει το DOM, το πρόγραμμα περιήγησης επανασχεδιάζει την εικόνα της σελίδας σχεδόν αμέσως. Ως αποτέλεσμα έχουμε Η απόδοση σελίδας συμμορφώνεται πάντα με το DOM.

Για να διαβάσουμε και να τροποποιήσουμε το DOM μέσω προγραμματισμού, το πρόγραμμα περιήγησης μας παρέχει ένα DOM API ή, με άλλα λόγια, μια διεπαφή προγραμματισμού. Με απλό τρόπο, το DOM API είναι μια συλλογή από έναν τεράστιο αριθμό διαφορετικών αντικειμένων, τις ιδιότητες και τις μεθόδους τους που μπορούμε να χρησιμοποιήσουμε για να ανάγνωση και τροποποίηση του DOM.

Για να εργαστείτε με το DOM στις περισσότερες περιπτώσεις, χρησιμοποιείται JavaScript, επειδή. μέχρι σήμερα, είναι η μόνη γλώσσα προγραμματισμού στην οποία μπορούν να εκτελεστούν σενάρια σε πρόγραμμα περιήγησης.

Γιατί χρειαζόμαστε ένα DOM API;Το χρειαζόμαστε για να μπορούμε να χρησιμοποιούμε JavaScript για να αλλάξουμε τη σελίδα αμέσως, π.χ. κάνουν το δυναμικό και διαδραστικό.

Το DOM API μας παρέχει (προγραμματιστές) μεγάλο ποσόμεθόδους με τις οποίες μπορούμε να αλλάξουμε τα πάντα στη σελίδα, καθώς και να αλληλεπιδράσουμε με τον χρήστη. Εκείνοι. αυτή η διεπαφή προγραμματισμού μας επιτρέπει να δημιουργήσουμε πολύπλοκες διεπαφές, φόρμες, να επεξεργαζόμαστε ενέργειες χρήστη, να προσθέτουμε και να αφαιρούμε διάφορα στοιχείαστη σελίδα, αλλάξτε το περιεχόμενό τους, τις ιδιότητες (χαρακτηριστικά) και πολλά άλλα.

Τώρα στον Ιστό δεν υπάρχουν πρακτικά ιστότοποι στα σενάρια των οποίων δεν θα υπήρχε δουλειά με το DOM.

Τι είναι ο κώδικας HTML για μια σελίδα;

Πριν προχωρήσετε στη μελέτη του μοντέλου αντικειμένου εγγράφου, πρέπει πρώτα να θυμάστε ποιος είναι ο πηγαίος κώδικας μιας ιστοσελίδας (έγγραφο HTML).

Ο πηγαίος κώδικας μιας ιστοσελίδας αποτελείται από ετικέτες, χαρακτηριστικά, σχόλια και κείμενο. Οι ετικέτες είναι η βασική σύνταξη της HTML. Τα περισσότερα από αυτά είναι σε ζευγάρια. Σε αυτή την περίπτωση, ένα από αυτά είναι το άνοιγμα και το άλλο είναι το κλείσιμο. Ένα τέτοιο ζεύγος ετικετών σχηματίζει ένα στοιχείο HTML. Τα στοιχεία HTML μπορούν να έχουν Επιπλέον επιλογές- ιδιότητες.

Σε ένα έγγραφο για τη δημιουργία μιας συγκεκριμένης σήμανσης, ορισμένα στοιχεία βρίσκονται μέσα σε άλλα. Ως αποτέλεσμα, ένα έγγραφο HTML μπορεί να θεωρηθεί ως ένα σύνολο ένθετων στοιχείων HTML.

Ως παράδειγμα, λάβετε υπόψη τον ακόλουθο κώδικα HTML:

Τίτλος σελίδας

Τίτλος άρθρου

ενότητα άρθρου

Περιεχόμενο του άρθρου

Σε αυτόν τον κώδικα, το ριζικό στοιχείο είναι html . Τα στοιχεία του κεφαλιού και του σώματος είναι φωλιασμένα μέσα σε αυτό. Το στοιχείο head περιέχει τον τίτλο, ενώ το στοιχείο σώματος περιέχει h1 και div. Το στοιχείο div με τη σειρά του περιέχει h2 και p .

Τώρα ας δούμε πώς το πρόγραμμα περιήγησης δημιουργεί ένα δέντρο DOM με βάση τον κώδικα HTML.

Πώς δημιουργείται το δέντρο DOM του εγγράφου;

Όπως ήδη περιγράφηκε παραπάνω, το πρόγραμμα περιήγησης δημιουργεί ένα δέντρο με βάση στοιχεία HTML και άλλες οντότητες. πηγαίος κώδικαςσελίδες. Κατά την εκτέλεση αυτής της διαδικασίας, λαμβάνει υπόψη την ένθεση στοιχείων μεταξύ τους.

Ως αποτέλεσμα, το πρόγραμμα περιήγησης χρησιμοποιεί το δέντρο DOM που προκύπτει όχι μόνο στην εργασία του, αλλά μας παρέχει επίσης ένα API για βολική λειτουργίαμε αυτό μέσω JavaScript.

Κατά τη δημιουργία του DOM, το πρόγραμμα περιήγησης δημιουργεί αντικείμενα από στοιχεία HTML, κείμενο, σχόλια και άλλες οντότητες αυτής της γλώσσας ( Κόμβοι DOM-δέντρα).

Στις περισσότερες περιπτώσεις, οι προγραμματιστές ιστού ενδιαφέρονται μόνο για αντικείμενα (κόμβους) που σχηματίζονται από στοιχεία HTML.

Ταυτόχρονα, το πρόγραμμα περιήγησης δεν δημιουργεί απλώς αντικείμενα από στοιχεία HTML, αλλά τα συνδέει μεταξύ τους με συγκεκριμένες συνδέσεις, ανάλογα με το πώς σχετίζεται το καθένα με το άλλο στον κώδικα.

Τα στοιχεία που βρίσκονται απευθείας σε ένα στοιχείο είναι παιδιά του. Και είναι γονιός για τον καθένα τους. Επιπλέον, όλα αυτά τα στοιχεία σε σχέση μεταξύ τους είναι αδέρφια (αδέρφια).

Επιπλέον, στην HTML, κάθε στοιχείο έχει πάντα έναν γονέα (το στοιχείο HTML στο οποίο βρίσκεται άμεσα). Στην HTML, ένα στοιχείο δεν μπορεί να έχει πολλούς γονείς. Η μόνη εξαίρεση είναι το στοιχείο html. Δεν έχει γονιό.

Για να λάβετε το δέντρο DOM όπως το δημιουργεί το πρόγραμμα περιήγησης, χρειάζεται απλώς να «τακτοποιήσετε» όλα τα στοιχεία ανάλογα με τη σχέση τους μεταξύ τους.

Η δημιουργία του δέντρου DOM γίνεται από πάνω προς τα κάτω.

Η ρίζα του δέντρου DOM είναι πάντα το ίδιο το έγγραφο (ο κόμβος του εγγράφου). Επιπλέον, το δέντρο δημιουργείται ανάλογα με τη δομή του κώδικα HTML.

Για παράδειγμα, ο κώδικας HTML που εξετάσαμε παραπάνω θα έχει το ακόλουθο δέντρο DOM:


Στην κορυφή αυτού του δέντρου βρίσκεται ο κόμβος του εγγράφου. Αυτός ο κόμβος σχετίζεται με το html, είναι το παιδί του. Ο κόμβος html σχηματίζεται από το στοιχείο html ( ...). Κεφαλοί κόμβοι ( ...) και το σώμα ( ...) είναι γονικά σε html . Σε σχέση μεταξύ τους είναι αδέρφια, γιατί έχουν έναν γονέα. Ο κόμβος κεφαλής συσχετίζεται με τον τίτλο (lt;title>...), είναι παιδί του. Οι κόμβοι h1 και div σχετίζονται με το σώμα, για αυτούς είναι ο γονέας. Ο κόμβος div συνδέεται με το h2 (

...

) και p(), είναι τα παιδιά του.

Το δέντρο ξεκινά, όπως σημειώθηκε παραπάνω, από το αντικείμενο (κόμβος) έγγραφο . Με τη σειρά του έχει έναν θυγατρικό κόμβο που σχηματίζεται από το στοιχείο html ( ...). στοιχεία κεφαλής ( ...) και το σώμα ( ...) είναι σε html και επομένως είναι παιδιά του. Στη συνέχεια, ο κύριος κόμβος είναι ο γονέας του τίτλου (lt;title>...). Τα στοιχεία h1 και div είναι φωλιασμένα μέσα στο σώμα, που σημαίνει ότι είναι τα παιδιά του. Το div περιέχει απευθείας τα στοιχεία h2 (

...

) και π(). Αυτό σημαίνει ότι ο κόμβος div για καθένα από αυτούς είναι ο γονέας.

Αυτός είναι ο τρόπος με τον οποίο το δέντρο DOM είναι απλά χτισμένο στο πρόγραμμα περιήγησης με βάση τον κώδικα HTML.

Γιατί πρέπει να ξέρετε πώς κατασκευάζεται ένα δέντρο DOM;Πρώτον, είναι η κατανόηση του περιβάλλοντος στο οποίο θέλετε να αλλάξετε κάτι. Δεύτερον, οι περισσότερες ενέργειες κατά την εργασία με το DOM καταλήγουν στην εύρεση (επιλογή) των απαραίτητων στοιχείων. Χωρίς να γνωρίζουμε πώς είναι διατεταγμένο το δέντρο DOM και τις συνδέσεις μεταξύ των κόμβων, θα είναι αρκετά δύσκολο να βρεθεί ένα συγκεκριμένο στοιχείο σε αυτό.

Ασκηση

Με βάση το δέντρο DOM που φαίνεται στο σχήμα, δημιουργήστε τον κώδικα HTML.


Η αναφορά περιέχει μια περιγραφή όλων των ιδιοτήτων και μεθόδων των τυπικών ενσωματωμένων αντικειμένων JavaScript.

Μοντέλο αντικειμένου εγγράφου

Μοντέλο αντικειμένου εγγράφουΤο (Document Object Model, DOM) είναι μια διεπαφή προγραμματισμού εφαρμογών (API) για XML που έχει επεκταθεί για να λειτουργεί και με HTML.

Στο DOM, όλο το περιεχόμενο της σελίδας (στοιχεία και κείμενο) αναπαρίσταται ως μια ιεραρχία κόμβων. Σκεφτείτε τον ακόλουθο κώδικα:

<a href="https://bar812.ru/el/podpis-k-shkolnoi-fotke-shkolnaya-gazeta-prosto-klass-ostalnye-stranicy.html">απλή σελίδα</a>

Γειά σου Κόσμε!

Αυτός ο κώδικας μπορεί να αναπαρασταθεί χρησιμοποιώντας το DOM ως ιεραρχία κόμβων:

Με την αναπαράσταση ενός εγγράφου ως δέντρου κόμβων, το DOM API δίνει στους προγραμματιστές πλήρη έλεγχο του περιεχομένου και της δομής μιας ιστοσελίδας.

Κατά την περιγραφή της δενδρικής δομής του DOM, χρησιμοποιείται ορολογία που δανείστηκε από οικογενειακά δέντρα.

Έτσι, ένας κόμβος που βρίσκεται ακριβώς πάνω από έναν δεδομένο κόμβο ονομάζεται γονικός κόμβος του συγκεκριμένου κόμβου. Οι κόμβοι που βρίσκονται ένα επίπεδο κάτω από αυτόν τον κόμβο ονομάζονται παιδιά αυτού του κόμβου. Οι κόμβοι που βρίσκονται στο ίδιο επίπεδο και έχουν τον ίδιο γονέα ονομάζονται αδέρφια ή αδέρφια. Οι κόμβοι που βρίσκονται οποιοσδήποτε αριθμός επιπέδων κάτω από έναν δεδομένο κόμβο ονομάζονται απόγονοί του. Οι γονείς, οι παππούδες και οποιοιδήποτε άλλοι κόμβοι βρίσκονται σε οποιοδήποτε αριθμό επιπέδων πάνω από έναν δεδομένο κόμβο ονομάζονται πρόγονοί του.

Η αναφορά DOM περιέχει μια περιγραφή των αντικειμένων Document, Element, Event και NodeList, συμπεριλαμβανομένης μιας περιγραφής των μεθόδων και των ιδιοτήτων τους:

Κατάλογος BOM

Το BOM (Browser Object Model σε μετάφραση από τα Αγγλικά - Browser Object Model) παρέχει πρόσβαση στο παράθυρο του προγράμματος περιήγησης και σας επιτρέπει να το χειριστείτε και τα στοιχεία του.

Τα αντικείμενα BOM παρέχουν πρόσβαση στη λειτουργικότητα του προγράμματος περιήγησης ανεξάρτητα από το περιεχόμενο της ιστοσελίδας. Το θέμα του BOM είναι ενδιαφέρον και σύνθετο ταυτόχρονα, γιατί λόγω της μακροχρόνιας απουσίας των προδιαγραφών, οι κατασκευαστές προγραμμάτων περιήγησης επέκτειναν ελεύθερα το BOM όπως έκριναν. Πολλά στοιχεία παρόμοια με διαφορετικά προγράμματα περιήγησης, έχουν γίνει de facto πρότυπα που τηρούνται μέχρι σήμερα για λόγους αμοιβαίας συμβατότητας. Για να τυποποιήσει αυτές τις θεμελιώδεις πτυχές της JavaScript, το W3C όρισε τα βασικά στοιχεία BOM στην προδιαγραφή HTML5.

Εργασία με το μοντέλο DOM

Κάθε αντικείμενο Window έχει μια ιδιότητα έγγραφο A που αναφέρεται σε αντικείμενο Document. Αυτό το αντικείμενο Document δεν είναι αυτόνομο αντικείμενο. Είναι το κεντρικό αντικείμενο ενός εμπλουτισμένου API, γνωστό ως Document Object Model (DOM), το οποίο καθορίζει τον τρόπο πρόσβασης στο περιεχόμενο ενός εγγράφου.

Επισκόπηση του DOM

Μοντέλο αντικειμένου εγγράφου (DOM)είναι μια θεμελιώδης διεπαφή προγραμματισμού εφαρμογών που παρέχει τη δυνατότητα εργασίας περιεχόμενο HTMLκαι έγγραφα XML. Το DOM Application Programming Interface (API) δεν είναι ιδιαίτερα περίπλοκο, αλλά υπάρχουν πολλά αρχιτεκτονικά χαρακτηριστικά που πρέπει να γνωρίζετε.

Πρώτα απ 'όλα, θα πρέπει να γίνει κατανοητό ότι τα ένθετα στοιχεία των εγγράφων HTML ή XML αντιπροσωπεύονται ως δέντρο αντικειμένων DOM. Η δενδρική προβολή ενός εγγράφου HTML περιέχει κόμβους που αντιπροσωπεύουν στοιχεία ή ετικέτες, όπως π.χ και

Και κόμβοι που αντιπροσωπεύουν γραμμές κειμένου. Ένα έγγραφο HTML μπορεί επίσης να περιέχει κόμβους που αντιπροσωπεύουν σχόλια HTML. Εξετάστε το ακόλουθο απλό έγγραφο HTML:

Δείγμα εγγράφου

Αυτό είναι ένα έγγραφο HTML

Παράδειγμα απλόςκείμενο.

Η αναπαράσταση DOM αυτού του εγγράφου φαίνεται στο ακόλουθο διάγραμμα:

Για όσους δεν είναι ακόμη εξοικειωμένοι με τις δομές δέντρων στον προγραμματισμό υπολογιστών, είναι χρήσιμο να γνωρίζουν ότι η ορολογία για την περιγραφή τους έχει δανειστεί από οικογενειακά δέντρα. Ο κόμβος ακριβώς πάνω από τον δεδομένο κόμβο καλείται γονικόςσε σχέση με αυτόν τον κόμβο. Οι κόμβοι που βρίσκονται ένα επίπεδο κάτω από έναν άλλο κόμβο είναι θυγατρικέςσε σχέση με αυτόν τον κόμβο. Καλούνται οι κόμβοι που βρίσκονται στο ίδιο επίπεδο και έχουν τον ίδιο γονέα αδελφικός. Οι κόμβοι που βρίσκονται οποιοσδήποτε αριθμός επιπέδων κάτω από έναν άλλο κόμβο είναι τα παιδιά του. Ο γονέας, ο παππούς και οι άλλοι κόμβοι πάνω από αυτόν τον κόμβο είναι οι πρόγονοί του.

Κάθε ορθογώνιο σε αυτό το διάγραμμα είναι ένας κόμβος εγγράφου, ο οποίος αντιπροσωπεύεται από το αντικείμενο κόμβος. Σημειώστε ότι το σχήμα δείχνει τρία διάφοροι τύποικόμβους. Η ρίζα του δέντρου είναι ο κόμβος Document, ο οποίος αντιπροσωπεύει ολόκληρο το έγγραφο. Οι κόμβοι που αντιπροσωπεύουν στοιχεία HTML είναι κόμβοι τύπου Element και οι κόμβοι που αντιπροσωπεύουν κείμενο είναι κόμβοι τύπου Text. Το Document, το Element και το Text είναι υποκλάσεις της κλάσης Node. Το Document και το Element είναι οι δύο πιο σημαντικές κλάσεις στο DOM.

Ο τύπος κόμβου και οι υποτύποι του σχηματίζουν την ιεραρχία τύπων που φαίνεται στο παρακάτω διάγραμμα. Σημειώστε τις τυπικές διαφορές μεταξύ των γενικών τύπων Document και Element και των τύπων HTMLDocument και HTMLElement. Ο τύπος εγγράφου αντιπροσωπεύει ένα έγγραφο HTML και XML και η κλάση Element αντιπροσωπεύει ένα στοιχείο αυτού του εγγράφου. Οι υποκλάσεις HTMLDocument και HTMLElement αντιπροσωπεύουν συγκεκριμένα ένα έγγραφο HTML και τα στοιχεία του:

Επίσης, σε αυτό το διάγραμμα είναι αξιοσημείωτος ο μεγάλος αριθμός υποτύπων της κλάσης HTMLElement που αντιπροσωπεύουν συγκεκριμένους τύπους στοιχείων HTML. Καθένα από αυτά ορίζει ιδιότητες JavaScript που αντικατοπτρίζουν τα χαρακτηριστικά HTML ενός συγκεκριμένου στοιχείου ή ομάδας στοιχείων. Ορισμένες από αυτές τις συγκεκριμένες κλάσεις ορίζουν πρόσθετες ιδιότητες ή μεθόδους που δεν αντικατοπτρίζουν τη σύνταξη της γλώσσας σήμανσης HTML.

Επιλογή στοιχείων εγγράφου

Δουλειά της πλειοψηφίας προγράμματα πελάτηστο JavaScriptσχετίζεται κατά κάποιο τρόπο με τη χειραγώγηση των στοιχείων του εγγράφου. Κατά την εκτέλεση, αυτά τα προγράμματα μπορούν να χρησιμοποιήσουν την καθολική μεταβλητή εγγράφου, η οποία αναφέρεται στο αντικείμενο Document. Ωστόσο, για να πραγματοποιηθεί οποιοσδήποτε χειρισμός σε στοιχεία εγγράφου, το πρόγραμμα πρέπει με κάποιο τρόπο να αποκτήσει ή να επιλέξει αντικείμενα Element που αναφέρονται σε αυτά τα στοιχεία του εγγράφου. Το DOM ορίζει διάφορους τρόπους επιλογής στοιχείων. Μπορείτε να επιλέξετε ένα στοιχείο ή στοιχεία ενός εγγράφου:

    από την τιμή του χαρακτηριστικού id.

    από την τιμή του χαρακτηριστικού name?

    με όνομα ετικέτας.

    με το όνομα της τάξης ή των κλάσεων CSS.

    για να ταιριάζει με έναν συγκεκριμένο επιλογέα CSS.

Όλες αυτές οι τεχνικές επιλογής στοιχείων περιγράφονται στις ακόλουθες υποενότητες.

Επιλογή στοιχείων κατά τιμή χαρακτηριστικού id

Όλα τα στοιχεία HTML έχουν χαρακτηριστικά id. Η τιμή αυτού του χαρακτηριστικού πρέπει να είναι μοναδική μέσα στο έγγραφο - κανένα στοιχείο στο ίδιο έγγραφο δεν πρέπει να έχει την ίδια τιμή χαρακτηριστικού id. Μπορείτε να επιλέξετε ένα στοιχείο από μια μοναδική τιμή του χαρακτηριστικού id χρησιμοποιώντας τη μέθοδο getElementById()Αντικείμενο εγγράφου:

Var section1 = document.getElementById("section1");

Αυτός είναι ο ευκολότερος και πιο συνηθισμένος τρόπος επιλογής στοιχείων. Εάν το σενάριο πρέπει να μπορεί να χειριστεί ένα συγκεκριμένο σύνολο στοιχείων εγγράφου, αντιστοιχίστε τιμές στα χαρακτηριστικά id αυτών των στοιχείων και χρησιμοποιήστε τη δυνατότητα αναζήτησης με βάση αυτές τις τιμές.

εκδόσεις Internet Explorerκάτω από το IE8 μέθοδος getElementById() πραγματοποιεί αναζήτηση για τιμές χαρακτηριστικού id με τρόπο χωρίς διάκριση πεζών-κεφαλαίων και επίσης επιστρέφει στοιχεία που ταιριάζουν με την τιμή του χαρακτηριστικού name.

Επιλογή στοιχείων από την τιμή του χαρακτηριστικού name

Το χαρακτηριστικό όνομα HTML προοριζόταν αρχικά για την ονομασία στοιχείων φόρμας και η τιμή αυτού του χαρακτηριστικού χρησιμοποιήθηκε κατά την υποβολή των δεδομένων φόρμας στον διακομιστή. Όπως το χαρακτηριστικό id, το χαρακτηριστικό name εκχωρεί ένα όνομα σε ένα στοιχείο. Ωστόσο, σε αντίθεση με το id, η τιμή του χαρακτηριστικού name δεν χρειάζεται να είναι μοναδική: πολλά στοιχεία μπορούν να έχουν το ίδιο όνομα ταυτόχρονα, κάτι που είναι αρκετά συνηθισμένο όταν χρησιμοποιείται σε κουμπιά επιλογής και φόρμες πλαισίου ελέγχου. Επίσης, σε αντίθεση με το id, το χαρακτηριστικό name μπορεί να καθοριστεί μόνο σε ορισμένα στοιχεία HTML, συμπεριλαμβανομένων των φορμών, των στοιχείων φόρμας και των στοιχείων.