Τι είναι το μοντέλο αντικειμένου εγγράφου και γιατί πρέπει να γνωρίζετε πώς να το χρησιμοποιήσετε.

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

Αλλά μετά αποφασίζετε ότι θέλετε να κάνετε ένα άλλο βήμα στη μάθησή σας και έχετε αρχίσει να αναρωτιέστε: «Πώς μπορώ να προσθέσω κινούμενα σχέδια στη σελίδα μου; Εύχομαι αυτό το κουμπί να κάνει κάποια κίνηση στη σελίδα μου όταν το έκανα κλικ! "

Λοιπόν, εκεί έρχεται το DOM για να λύσει το πρόβλημά σας. Ίσως έχετε ακούσει πολλά για αυτό, αλλά ίσως να μην γνωρίζετε ακόμα τι είναι αυτό και ποια προβλήματα επιλύει. Ας σκάψουμε λοιπόν.

Λοιπόν, τι είναι το DOM;

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

Το DOM (Document Object Model) είναι μια διεπαφή που αντιπροσωπεύει τον τρόπο ανάγνωσης των εγγράφων HTML και XML από το πρόγραμμα περιήγησης. Επιτρέπει σε μια γλώσσα (JavaScript) να χειριστεί, να δομήσει και να διαμορφώσει τον ιστότοπό σας. Αφού το πρόγραμμα περιήγησης διαβάσει το έγγραφο HTML σας, δημιουργεί ένα δέντρο αναπαραγωγής που ονομάζεται Πρότυπο αντικειμένου εγγράφου και καθορίζει τον τρόπο πρόσβασης σε αυτό το δέντρο.

Πλεονεκτήματα

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

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

Αναπαράσταση από το πρόγραμμα περιήγησης

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

  1. Έγγραφο : Αντιμετωπίζει όλα τα έγγραφα HTML .
  2. Στοιχεία : Όλες οι ετικέτες που βρίσκονται μέσα σε HTML ή XML μετατρέπονται σε στοιχείο DOM.
  3. Κείμενο : Όλο το περιεχόμενο των ετικετών.
  4. Χαρακτηριστικά : Όλα τα χαρακτηριστικά από ένα συγκεκριμένο στοιχείο HTML . Στην εικόνα, το χαρακτηριστικό class = "hero" είναι ένα χαρακτηριστικό από το στοιχείο < p>.

Χειρισμός του DOM

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

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Πολύ απλό, σωστά; Τώρα πρόκειται να μάθουμε περισσότερα για τις μεθόδους DOM: πώς να αποκτήσουμε τα στοιχεία μας και να αρχίσουμε να χειριζόμαστε.

Μέθοδοι

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

getElementById ()

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

var myStart = document.getElementsById('start');

myStart : Το όνομα της μεταβλητής μας που μοιάζει με το αναγνωριστικό μας που πέρασε.

έναρξη : η ταυτότητα πέρασε. Και σε περίπτωση που δεν έχουμε κανένα αναγνωριστικό με αυτό το συγκεκριμένο όνομα, επιστρέφει μηδέν .

getElementsByClassName ()

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

var myContainer = document.getElementsByClassName('container');

myContainer : Το όνομα της μεταβλητής μας που μοιάζει με την τάξη μας πέρασε.

.container : η τάξη μας πέρασε. Σε περίπτωση που δεν έχουμε τάξη με αυτό το συγκεκριμένο όνομα, επιστρέφει μηδέν .

getElementsByTagName ()

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

var buttons = document.getElementsByTagName('button');

κουμπιά : Το όνομα της μεταβλητής μας που μοιάζει με το όνομα της ετικέτας μας πέρασε.

κουμπί : όνομα ετικέτας που θέλουμε να λάβουμε.

querySelector ()

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

var resetButton = document.querySelector('#reset');

resetButton : Το όνομα της μεταβλητής μας που μοιάζει με τον επιλογέα μας πέρασε.

#reset : Ο επιλογέας πέρασε και αν δεν έχετε κάποιον επιλογέα που να ταιριάζει, επιστρέφει μηδέν .

querySelectorAll ()

Πολύ παρόμοια με τη μέθοδο querySelector () , αλλά με μία μόνο διαφορά: επιστρέφει όλα τα στοιχεία που ταιριάζουν με τον επιλογέα CSS που έχει περάσει. Ο επιλογέας πρέπει επίσης να ακολουθεί τη σύνταξη CSS . Σε περίπτωση που δεν έχετε κανένα επιλογέα , επιστρέφει μηδέν .

var myButtons = document.querySelector('#buttons');

myButtons : Το όνομα της μεταβλητής μας που μοιάζει με τους επιλεγμένους μας .

#buttons : ο επιλογέας πέρασε, εάν δεν έχετε κάποιον επιλογέα που να ταιριάζει, επιστρέφει null .

Αυτές είναι μερικές από τις πιο χρησιμοποιούμενες μεθόδους DOM. Υπάρχουν πολλές ακόμη μέθοδοι που μπορείτε να χρησιμοποιήσετε, όπως το createElement (), το οποίο δημιουργεί ένα νέο στοιχείο στη σελίδα HTML σας και το setAttribute () που σας επιτρέπει να ορίσετε νέα χαρακτηριστικά για στοιχεία HTML. Μπορείτε να τα εξερευνήσετε μόνοι σας.

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

Τώρα, πρόκειται να μάθουμε για Εκδηλώσεις - τελικά χωρίς αυτά δεν μπορούμε να κάνουμε κινούμενες εικόνες στις σελίδες μας.

Εκδηλώσεις

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

Κάντε κλικ

Ένα από τα πιο συχνά χρησιμοποιούμενα συμβάντα είναι το συμβάν κλικ. Όταν ο χρήστης κάνει κλικ σε ένα συγκεκριμένο στοιχείο, θα πραγματοποιήσει κάποια ενέργεια.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Οι παράμετροι addEventListener () είναι:

  1. Ο τύπος του συμβάντος που θέλετε (σε αυτήν την περίπτωση " κάντε κλικ ").
  2. Μια συνάρτηση επανάκλησης
  3. Το useCapture από προεπιλογή είναι ψευδές. Δείχνει εάν θέλετε ή όχι να "καταγράψετε" το συμβάν.

επιλέγω

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

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

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

Τώρα, θα δούμε πώς μπορούμε να διασχίσουμε το DOM και να χρησιμοποιήσουμε ορισμένες ιδιότητες.

Διασχίζοντας το DOM

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

.childNodes

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

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.πρώτο παιδί

Αυτή η ιδιότητα επιστρέφει το πρώτο παιδί του δεδομένου στοιχείου.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeName

Αυτή η ιδιότητα επιστρέφει το όνομα του δεδομένου στοιχείου. Σε αυτήν την περίπτωση, περάσαμε ένα div , οπότε θα επιστρέψει το " div ".

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

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

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Αυτή η ιδιότητα επιστρέφει τον τύπο του δεδομένου στοιχείου. Σε αυτήν την περίπτωση, επιστρέφει " 1 ".

var container = document.querySelector('.container')
var getValue = container.nodeType;

Ωστόσο, τι σημαίνει το « 1 »; Είναι βασικά ο κόμβος του δεδομένου στοιχείου. Σε αυτήν την περίπτωση, είναι _ELEMENT_NODE_ και επιστρέφει μηδέν. Εάν αυτό ήταν ένα χαρακτηριστικό, θα επιστραφεί ως " 2 " σε εμάς και στην τιμή του χαρακτηριστικού.

Μπορείτε να διαβάσετε περισσότερα για τους τύπους κόμβων εδώ.

Στοιχεία

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

.parentNode

Αυτή η ιδιότητα επιστρέφει τον γονέα του δεδομένου κόμβου.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Επιστρέφει το πρώτο θυγατρικό στοιχείο του δεδομένου στοιχείου.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Επιστρέφει το τελευταίο θυγατρικό στοιχείο του δεδομένου στοιχείου.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

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

συμπέρασμα

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

; F με ΝΕΡΓΕΙΕΣ στο Twitter!

F ollow me στο GitHub!

Ψάχνω μια απομακρυσμένη ευκαιρία, οπότε αν έχω κάτι θα ήθελα να το ακούσω, παρακαλώ επικοινωνήστε μαζί μου!