Γνωρίζατε ότι μπορούμε να χρησιμοποιήσουμε JavaScript για χειρισμό περιεχομένου στην ιστοσελίδα; Φαίνεται ενδιαφέρον, σωστά; Ας καταλάβουμε τι είναι το μοντέλο αντικειμένου εγγράφου. DOM σε JavaScript με τον ακόλουθο τρόπο:
- Τι είναι το DOM σε JavaScript;
- Ενέργειες του DOM σε JavaScript
- Ερώτημα του DOM
- Ακούγοντας εκδηλώσεις
- Αλληλεπίδραση με φόρμες
- Δημιουργία στοιχείων HTML
- Προσθήκη CSS
Τι είναι το DOM σε JavaScript;
Το μοντέλο αντικειμένου εγγράφου ή το DOM δημιουργείται από το πρόγραμμα περιήγησης όταν φορτώνεται μια ιστοσελίδα. Σε γραφική μορφή, είναι σαν ένα δέντρο στοιχείων που ονομάζονται επίσης κόμβοι, τα οποία χρησιμοποιούνται για την αναπαράσταση κάθε στοιχείου στη σελίδα.
Όλο το DOM της ιστοσελίδας μας βρίσκεται μέσα στο αντικείμενο του εγγράφου. Με προγραμματισμό, αυτό το μοντέλο μας επιτρέπει να διαβάσουμε ή ακόμα και να αλλάξουμε το περιεχόμενο της σελίδας μας μέσω . Δεν είναι δροσερό;
Ενέργειες του DOM σε JavaScript
Μερικές από τις ενέργειες που μπορούμε να εκτελέσουμε με αυτό το μοντέλο είναι:
Αλλαγή / Κατάργηση στοιχείων HTML στο DOM / στη σελίδα.
Αλλαγή και προσθήκη στυλ CSS σε στοιχεία
τι είναι αμετάβλητο αντικείμενο στην Java
Ανάγνωση και αλλαγή χαρακτηριστικών (href, src, alt) κ.λπ.
Δημιουργήστε νέα στοιχεία και τοποθετήστε τα στο DOM / σελίδα.
Επισυνάψτε ακροατές συμβάντων σε στοιχεία (κλικ, πάτημα πλήκτρου, υποβολή)
Ερώτημα του DOM σε JavaScript
Το να πιάσετε ένα στοιχείο HTML ή να το κρατήσετε για προσθήκη / αλλαγή ή περιεχόμενο ονομάζεται ερώτημα.
Κωδικός HTML:
πώς να μετατρέψετε έναν αριθμό σε δυαδικό στο python
Javascript και το DOM h1 {font-size: 60px}Κωδικός JavaScript:
var title = document.getElementById ('title') // χρώμα cgangin σε κόκκινο τίτλο.style.color = 'red' var body = document.getElementById ('body') // αλλαγή χρώματος φόντου σε γαλάζιο body.style. backgroundColor = 'lightblue'python __init__ τάξη
Αλλάξαμε το χρώμα κειμένου του τίτλου από μαύρο σε κόκκινο χρησιμοποιώντας JavaScript. Αυτό το επιτύχαμε χρησιμοποιώντας το .στυλ Στη συνέχεια η ιδιότητα άλλαξε την τιμή του χρώμα να ισούται με καθαρά .
Τώρα ας αλλάξουμε το χρώμα φόντου του στοιχείου σώματος σε γαλάζιο .
Με αυτό, φτάνουμε στο τέλος αυτού του DOM σε άρθρο JavaScript. Ελπίζω να έχετε κατανοήσει πώς λειτουργούν τα μοντέλα αντικειμένων εγγράφων και πώς να εφαρμόσετε το ίδιο DOM σε JavaScript.
Τώρα που γνωρίζετε για το DOM σε JavaScript, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του 'DOM σε JavaScript' και θα επικοινωνήσουμε μαζί σας.