JavaΕκμάθηση σεναρίου DOM με Παράδειγμα

Σε τι είναι το DOM JavaΓραφή;

JavaΤο σενάριο μπορεί να έχει πρόσβαση σε όλα τα στοιχεία μιας ιστοσελίδας χρησιμοποιώντας το Μοντέλο Αντικειμένου Εγγράφου (DOM). Στην πραγματικότητα, το πρόγραμμα περιήγησης ιστού δημιουργεί ένα DOM της ιστοσελίδας όταν φορτώνεται η σελίδα. Το μοντέλο DOM δημιουργείται ως δέντρο αντικειμένων όπως αυτό:

Κάθε στοιχείο HTML σε μια σελίδα γίνεται ένας κόμβος μέσα σε αυτό το δέντρο. Τα προγράμματα περιήγησης ομαδοποιούν τους κόμβους DOM σε μερικούς βασικούς τύπους: οι κόμβοι στοιχείων αντιπροσωπεύουν ετικέτες όπως <p> or <div>, οι κόμβοι κειμένου κρατούν τις ορατές λέξεις μέσα σε μια ετικέτα, οι κόμβοι χαρακτηριστικών αποθηκεύουν τιμές όπως id or classκαι οι κόμβοι σχολίων διατηρούν <!-- --> σήμανση. Ο κορυφαίος κόμβος είναι πάντα ο document αντικείμενο και κάθε άλλο στοιχείο είναι απόγονός του.

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

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

Πώς να επιλέξετε στοιχεία DOM σε JavaΓραφή

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

• getElementById(): επιστρέφει το μοναδικό στοιχείο που ταιριάζει με ένα δεδομένο id αποδίδουν.
• getElementsByClassName(): Επιστρέφει μια ζωντανή HTMLCollection κάθε στοιχείου που φέρει μια δεδομένη κλάση.
• getElementsByTagName(): επιστρέφει μια ζωντανή HTMLCollection κάθε στοιχείου με ένα δεδομένο όνομα ετικέτας, όπως p or li.
• querySelector(): Επιστρέφει το πρώτο στοιχείο που ταιριάζει με οποιονδήποτε επιλογέα CSS.
• querySelectorAll(): Επιστρέφει μια στατική NodeList κάθε στοιχείου που ταιριάζει με έναν επιλογέα CSS.

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

Τα querySelector και querySelectorAll δέχονται οποιονδήποτε έγκυρο επιλογέα CSS, γεγονός που τα καθιστά την πιο ευέλικτη επιλογή για σύγχρονο κώδικα. Δοκιμάστε το παρακάτω απόσπασμα σε μια σελίδα που περιέχει ένα στοιχείο με id="title" και πολλά στοιχεία με class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

Οι getElementById και getElementsByClassName παραμένουν ταχύτερες για απλές αναζητήσεις, ενώ οι querySelector και querySelectorAll προτιμώνται κάθε φορά που η λογική επιλογής χρειάζεται την ισχύ της πλήρους σύνταξης CSS, όπως επιλογείς χαρακτηριστικών ή απογόνων.

Πώς να τροποποιήσετε, να δημιουργήσετε και να καταργήσετε στοιχεία DOM

Μόλις επιλεγεί ένα στοιχείο, JavaΈνα σενάριο μπορεί να διαβάσει ή να ξαναγράψει το περιεχόμενό του, τα χαρακτηριστικά του, ακόμη και την ύπαρξή του στο δέντρο. Χρησιμοποιώντας το DOM, JavaΈνα σενάριο μπορεί να δημιουργήσει νέα στοιχεία και χαρακτηριστικά, να αλλάξει υπάρχοντα στοιχεία και χαρακτηριστικά και να καταργήσει εντελώς υπάρχοντα στοιχεία και χαρακτηριστικά.

Αλλαγή περιεχομένου με getElementById και innerHTML

1. getElementById: Για πρόσβαση σε στοιχεία και χαρακτηριστικά των οποίων το αναγνωριστικό έχει οριστεί.
2. innerHTML: Για πρόσβαση στο περιεχόμενο ενός στοιχείου.

Δοκιμάστε αυτό το παράδειγμα μόνοι σας:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

Το πλαίσιο ειδοποίησης επιβεβαιώνει ότι το getElementById εντόπισε την επικεφαλίδα και το innerHTML επέστρεψε το κείμενο που ήταν αποθηκευμένο μέσα σε αυτήν.

Ανάγνωση κάθε παραγράφου με το getElementsByTagName

getElementsByTagName: Για πρόσβαση σε στοιχεία και χαρακτηριστικά χρησιμοποιώντας όνομα ετικέτας. Αυτή η μέθοδος θα επιστρέψει ένα παράταξη όλων των στοιχείων με το ίδιο όνομα ετικέτας.

Δοκιμάστε αυτό το παράδειγμα μόνοι σας:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Επειδή η συνάρτηση getElementsByTagName επιστρέφει μια ενεργή συλλογή, η συνάρτηση paragraphs[1] αναφέρεται στη δεύτερη παράγραφο του εγγράφου και η ενημέρωση της innerHTML αντικαθιστά αμέσως το κείμενό της στην οθόνη.

Δημιουργία και αφαίρεση στοιχείων με createElement και removeChild

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

• δημιουργίαΣτοιχείου(): δημιουργεί έναν νέο κόμβο στοιχείου στη μνήμη.
• appendChild(): συνδέει έναν κόμβο ως το τελευταίο παιδί ενός γονικού στοιχείου.
• setAttribute(): προσθέτει ή ενημερώνει ένα χαρακτηριστικό, όπως π.χ. class or href, σε ένα στοιχείο.
• removeChild(): αφαιρεί έναν καθορισμένο θυγατρικό κόμβο από τον γονικό του κόμβο.

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

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

Η συνάρτηση createElement() από μόνη της δεν εμφανίζει τίποτα, καθώς ο κόμβος εξακολουθεί να υπάρχει μόνο στη μνήμη. Εμφανίζεται μόνο όταν η συνάρτηση appendChild() ή μια παρόμοια μέθοδος όπως η prepend() τον επισυνάψει κάπου μέσα στο ορατό δέντρο. Τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν επίσης μια μικρότερη μέθοδο node.remove(), η οποία διαγράφει ένα στοιχείο απευθείας χωρίς να χρειάζεται αναφορά στον γονικό του κόμβο, σε αντίθεση με την παλαιότερη σύνταξη parent.removeChild(node).

Πώς να χειρίζεστε γεγονότα σε JavaΓραφή

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

Επισύναψη ενός Handler με onclick ή addEventListener

Η πρώτη, παλαιότερη προσέγγιση αντιστοιχίζει μια συνάρτηση απευθείας στην ιδιότητα on-event ενός στοιχείου:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

Ή, χρησιμοποιώντας τη σύγχρονη και πιο ευέλικτη μέθοδο addEventListener():

document.getElementById(id).addEventListener("click", functionname)

Η συνάρτηση addEventListener() προτιμάται γενικά επειδή σας επιτρέπει να επισυνάψετε περισσότερους από έναν χειριστές στο ίδιο συμβάν στο ίδιο στοιχείο και δέχεται ένα προαιρετικό τρίτο όρισμα που ελέγχει την καταγραφή, το οποίο θα καλυφθεί αργότερα σε αυτήν την ενότητα. Συνδυάζεται επίσης με την συνάρτηση removeEventListener(), η οποία αποσυνδέει έναν χειριστή όταν δεν χρειάζεται πλέον, κάτι που η ιδιότητα onclick δεν μπορεί να κάνει από μόνη της.

Η HTML υποστηρίζει επίσης ένα τρίτο στυλ: έναν ενσωματωμένο χειριστή γραμμένο απευθείας στην ετικέτα, όπως π.χ. <button onclick="clicked()">Click Me</button>Οι ενσωματωμένοι χειριστές συνδυάζουν τη σήμανση με τη λογική και γίνονται γρήγορα δύσκολοι στη συντήρηση, επομένως οι περισσότεροι JavaΟι προγραμματιστές σεναρίων τα κρατούν για γρήγορες επιδείξεις και βασίζονται στην addEventListener() για πραγματικές εφαρμογές.

Δοκιμάστε το: Ένα πλήρες παράδειγμα συμβάντος κλικ

Δοκιμάστε αυτό το παράδειγμα μόνοι σας:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

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

Το Αντικείμενο Συμβάντος

Κάθε χειριστής συμβάντων λαμβάνει αυτόματα ένα αντικείμενο συμβάντος ως πρώτο όρισμά του. Αυτό το αντικείμενο περιέχει χρήσιμες λεπτομέρειες σχετικά με το τι συνέβη, όπως το event.target (το ακριβές στοιχείο από το οποίο προήλθε η ενέργεια), το event.type (το όνομα του συμβάντος, όπως "κλικ") και μεθόδους όπως η event.preventDefault(), η οποία σταματά την προεπιλεγμένη συμπεριφορά ενός προγράμματος περιήγησης, όπως η παρακολούθηση ενός συνδέσμου ή η υποβολή μιας φόρμας.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Δύο ακόμη ιδιότητες ολοκληρώνουν το αντικείμενο συμβάντος: event.currentTarget αναφέρεται πάντα στο στοιχείο στο οποίο είναι συνδεδεμένος ο ακροατής, ακόμα κι αν η συνάρτηση event.target αναφέρει ένα ένθετο θυγατρικό στοιχείο, και η συνάρτηση event.stopPropagation() διακόπτει ένα συμβάν πριν συνεχίσει να αναβλύζει ή να καταγράφει περαιτέρω. Μαζί με την συνάρτηση preventDefault(), αυτά τα εργαλεία παρέχουν σε έναν χειριστή ακριβή έλεγχο του τι συμβαίνει στη συνέχεια.

Συμβάν Bubbling, Σύλληψη και Ανάθεση

Όταν ένα συμβάν ενεργοποιείται σε ένα ένθετο στοιχείο, δεν σταματά εκεί. φούσκωμα φάση, το συμβάν ταξιδεύει προς τα πάνω από το στοιχείο-στόχο μέσω κάθε προγονικού στοιχείου, μέχρι το έγγραφο. Στη φάση σύλληψη Στη φάση, η οποία εκτελείται πρώτη και είναι προαιρετική, το συμβάν ταξιδεύει προς τα κάτω από το έγγραφο στον προορισμό πριν ξεκινήσει η δημιουργία φυσαλίδων. {capture: true} ως τρίτο όρισμα στην addEventListener() για ακρόαση κατά τη φάση καταγραφής.

Αντιπροσωπεία εκδήλωσης εκμεταλλεύεται το bubbling: αντί να συνδέσετε έναν ξεχωριστό listener σε κάθε θυγατρικό στοιχείο, συνδέετε έναν listener σε έναν κοινόχρηστο γονικό στοιχείο και επιθεωρείτε το event.target για να προσδιορίσετε ποιο θυγατρικό στοιχείο το ενεργοποίησε. Αυτό χρησιμοποιεί λιγότερη μνήμη και καλύπτει αυτόματα τα στοιχεία που προστίθενται στη σελίδα αργότερα.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

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

Συχνές Ερωτήσεις