Εκπαιδευτικό πρόγραμμα DOM JavaScript με παράδειγμα

Τι είναι το DOM σε JavaScript;

Το JavaScript μπορεί να έχει πρόσβαση σε όλα τα στοιχεία μιας ιστοσελίδας που χρησιμοποιούν το Document Object Model (DOM). Στην πραγματικότητα, το πρόγραμμα περιήγησης ιστού δημιουργεί ένα DOM της ιστοσελίδας όταν φορτώνεται η σελίδα. Το μοντέλο DOM δημιουργείται ως δέντρο αντικειμένων όπως αυτό:

Πώς να χρησιμοποιήσετε το DOM και τις εκδηλώσεις

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

getElementById, innerHTML Παράδειγμα

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

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

<κεφάλι><άτομο>
Καλώς ορίσατε
Αυτό είναι το μήνυμα καλωσορίσματος.

Τεχνολογία
Αυτή είναι η ενότητα τεχνολογίας.

Παράδειγμα χειριστή συμβάντων

1. createElement: Για να δημιουργήσετε νέο στοιχείο
2. removeChild: Κατάργηση στοιχείου
3. Μπορείτε να προσθέσετε ένα πρόγραμμα χειρισμού συμβάντων σε ένα συγκεκριμένο στοιχείο όπως αυτό:

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

Ή

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

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

<κεφάλι><άτομο>