Έγγραφο DOM JavaScript

Πίνακας περιεχομένων

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

Το αντικείμενο εγγράφου HTML DOM

Το αντικείμενο εγγράφου αντιπροσωπεύει την ιστοσελίδα σας.

Εάν θέλετε να αποκτήσετε πρόσβαση σε οποιοδήποτε στοιχείο σε μια σελίδα HTML, ξεκινάτε πάντα με την πρόσβαση στο αντικείμενο εγγράφου.

Παρακάτω είναι μερικά παραδείγματα για το πώς μπορείτε να χρησιμοποιήσετε το αντικείμενο εγγράφου για πρόσβαση και χειρισμός HTML.

Εύρεση στοιχείων HTML

document.getElementById(id): Βρείτε ένα στοιχείο ανά αναγνωριστικό στοιχείου
document.getElementsByTagName(name): Βρείτε στοιχεία ανά όνομα ετικέτας
document.getElementsByClassName(name): Βρείτε στοιχεία ανά όνομα τάξης

Αλλαγή στοιχείων HTML

element.innerHTML = new html content: Αλλάξτε το εσωτερικό HTML ενός στοιχείου
element.attribute = new value: Αλλάξτε την τιμή χαρακτηριστικού ενός στοιχείου HTML
element.style.property = new style: Αλλάξτε το στυλ ενός στοιχείου HTML

element.setAttribute(attribute, value): Αλλάξτε την τιμή χαρακτηριστικού ενός στοιχείου HTML

Προσθήκη και διαγραφή στοιχείων

document.createElement(element): Δημιουργήστε ένα στοιχείο HTML
document.removeChild(element): Αφαιρέστε ένα στοιχείο HTML
document.appendChild(element): Προσθέστε ένα στοιχείο HTML
document.replaceChild(new, old): Αντικαταστήστε ένα στοιχείο HTML
document.write(text): Γράψτε στη ροή εξόδου HTML

Προσθήκη χειριστών συμβάντων

document.getElementById(id).onclick = function(){code}: Προσθήκη κώδικα χειριστή συμβάντων σε συμβάν onclick

Εύρεση αντικειμένων HTML

Το πρώτο HTML DOM Level 1 (1998), όρισε 11 αντικείμενα HTML, συλλογές αντικειμένων και ιδιότητες. Αυτά εξακολουθούν να ισχύουν σε HTML5.

Αργότερα, στο HTML DOM Επίπεδο 3, προστέθηκαν περισσότερα αντικείμενα, συλλογές και ιδιότητες.

document.anchors: Επιστρέφει όλα τα στοιχεία <a> που έχουν χαρακτηριστικό όνομα. Επίπεδο 1
document.applets: Καταργήθηκε. Επίπεδο 1
document.baseURI: Επιστρέφει το απόλυτο βασικό URI του εγγράφου. Επίπεδο: 3
document.body: Επιστρέφει το στοιχείο <body>. Επίπεδο 1
document.cookie: Επιστρέφει το cookie του εγγράφου. Επίπεδο 1
document.doctype: Επιστρέφει τον τύπο του εγγράφου. Επίπεδο: 3
document.documentElement: Επιστρέφει το στοιχείο <html>. Επίπεδο: 3
document.documentMode: Επιστρέφει τη λειτουργία που χρησιμοποιείται από το πρόγραμμα περιήγησης. Επίπεδο: 3
document.documentURI: Επιστρέφει το URI του εγγράφου. Επίπεδο: 3
document.domain: Επιστρέφει το όνομα τομέα του διακομιστή εγγράφων. Επίπεδο 1
document.domConfig: Απαλαιωμένο.. Επίπεδο: 3
document.embeds: Επιστρέφει όλα τα στοιχεία <embed>. Επίπεδο: 3
document.forms: Επιστρέφει όλα τα στοιχεία <form>. Επίπεδο 1
document.head: Επιστρέφει το στοιχείο <head>. Επίπεδο: 3
document.images: Επιστρέφει όλα τα στοιχεία <img>. Επίπεδο 1
document.implementation: Επιστρέφει την υλοποίηση DOM. Επίπεδο: 3
document.inputEncoding: Επιστρέφει την κωδικοποίηση του εγγράφου (σύνολο χαρακτήρων). Επίπεδο: 3
document.lastModified: Επιστρέφει την ημερομηνία και την ώρα που ενημερώθηκε το έγγραφο. Επίπεδο: 3
document.links: Επιστρέφει όλα τα στοιχεία <area> και <a> που έχουν χαρακτηριστικό href. Επίπεδο 1
document.readyState: Επιστρέφει την κατάσταση (φόρτωσης) του εγγράφου. Επίπεδο: 3
document.referrer: Επιστρέφει το URI του παραπομπής (το έγγραφο σύνδεσης). Επίπεδο 1
document.scripts: Επιστρέφει όλα τα στοιχεία <script>. Επίπεδο: 3
document.strictErrorChecking: Επιστρέφει εάν επιβληθεί έλεγχος σφαλμάτων. Επίπεδο: 3
document.title: Επιστρέφει το στοιχείο <title>. Επίπεδο 1
document.URL: Επιστρέφει την πλήρη διεύθυνση URL του εγγράφου. Επίπεδο 1