JavaScript HTML DOM Ναυτιλία

Με το HTML DOM, μπορείτε να χρησιμοποιήσετε τις σχέσεις κόμβων για να πλοηγηθείτε στο δέντρο κόμβων.

Δομή DOM

Σύμφωνα με το πρότυπο W3C HTML DOM, όλα τα αντικείμενα στο έγγραφο HTML είναι κόμβοι:

  • Ολόκληρο το έγγραφο είναι κόμβος έγγραφου
  • Κάθε στοιχείο HTML είναι κόμβος στοιχείου
  • Ο κείμενος κόμβος μέσα στο HTML στοιχείο είναι κόμβος κειμένου
  • Κάθε ιδιότητα HTML είναι κόμβος ιδιότητας
  • Όλες οι παρατηρήσεις είναι κόμβοι παρατηρήσεων
Δέντρο DOM HTML

Με το HTML DOM, όλοι οι κόμβοι στο δέντρο κόμβων μπορούν να επιστραφούν μέσω JavaScript.

Μπορείτε να δημιουργήσετε νέους κόμβους, αλλά και να τροποποιήσετε και να διαγράψετε όλους τους κόμβους.

Σχέσεις κόμβων

Οι κόμβοι στο δέντρο κόμβων έχουν συγκεκριμένες σχέσεις βαθμολόγησης μεταξύ τους.

  • Ο όρος (γονικός, υποκείμενος και συμμάχος, parent, child και sibling) χρησιμοποιείται για να περιγράψει αυτές τις σχέσεις.
  • Στο δέντρο κόμβων, ο κορυφαίος κόμβος ονομάζεται ρίζα (ο ρίζα κόμβος δεν έχει γονικό κόμβο).
  • Κάθε κόμβος έχει γονικό κόμβο, εκτός από τον ρίζα (ο ρίζα κόμβος δεν έχει γονικό κόμβο).
  • Οι κόμβοι μπορούν να έχουν ένα καθορισμένο αριθμό υποκείμενων.
  • Ο όρος 'συμμάχος' (αδελφός ή αδελφή) αναφέρεται σε κόμβους που έχουν τον ίδιο γονικό κόμβο.
<html>
   <head>
       <title>Εκμάθηση DOM</title>
   </head>
  <body>
       <h1>Πρώτη Σειρά DOM</h1>
       <p>Γειά σου κόσμε!</p>
   </body>
</html>
Δέντρο DOM HTML

Από τον παραπάνω HTML μπορείτε να διαβάσετε τις εξής πληροφορίες:

  • Το <html> είναι η ρίζα του κόμβου
  • Το <html> δεν έχει γονικό σημείο
  • Το <html> είναι ο πατέρας του <head> και του <body>
  • Το <head> είναι ο πρώτος υποσημείωση του <html>
  • <body> είναι το τελευταίο υποκείμενο του <html>

Επίσης:

  • <head> έχει ένα υποκείμενο: <title>
  • <title> έχει ένα υποκείμενο (κείμενο κόμβος): "Εκμάθηση DOM"
  • <body> έχει δύο υποκείμενα: <h1> και <p>
  • <h1> έχει ένα υποκείμενο: "Πρώτη κλάση DOM"
  • <p> έχει ένα υποκείμενο: "Hello world!"
  • <h1> και <p> είναι αδέρφια

Να ταξιδεύετε μεταξύ κόμβων

Με τη χρήση του JavaScript, μπορείτε να χρησιμοποιήσετε τις παρακάτω ιδιότητες κόμβου για να ταξιδεύετε μεταξύ κόμβων:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Υποκείμενο και τιμή κόμβου

Ένας συχνός σφάλμα στη διαχείριση DOM είναι να πιστεύουμε ότι το στοιχείο περιέχει κείμενο.

Παράδειγμα:

<title id="demo">Εκμάθηση DOM</title>

（στο παράδειγμα παραπάνω）στοιχείο κόμβο <title> Δεν περιέχειΚείμενο.

Είναι ένα κείμενο που περιέχει την τιμή "Εκμάθηση DOM"Κείμενο κόμβος.

Η τιμή του κειμένου του κειμενικού κόμβου μπορεί να αποκτηθεί μέσω της τιμής του κόμβου innerHTML για πρόσβαση στις ιδιότητες:

var myTitle = document.getElementById("demo").innerHTML;

Η πρόσβαση στην ιδιότητα innerHTML είναι ίση με την πρόσβαση στον πρώτο υποκείμενο nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Μπορείτε επίσης να επισκεφτείτε τον πρώτο υποκείμενο:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Τα παρακάτω τρία παραδείγματα ανακτούν <h1> το κείμενο του στοιχείου και να το αντιγράψει <p> Στο στοιχείο:

Παράδειγμα 1

<html>
<body>
<h1 id="id01">ἡ πρώτη μου σελίδα</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Παράδειγμα 2

<html>
<body>
<h1 id="id01">ἡ πρώτη μου σελίδα</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Παράδειγμα 3

<html>
<body>
<h1 id="id01">ἡ πρώτη μου σελίδα</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

InnerHTML

Σε αυτό το σεμινάριο, χρησιμοποιούμε innerHTML Αποκτά το περιεχόμενο του στοιχείου HTML.

Αλλά, η μελέτη των παραπάνω μεθόδων βοηθά στην κατανόηση της δομής δέντρου του DOM και της πλοήγησής του.

Ρίζα DOM

Υπάρχουν δύο ειδικές ιδιότητες που επιτρέπουν την πρόσβαση στον πλήρη έγγραφος:

  • document.body - το σώμα του εγγράφου
  • document.documentElement - ο πλήρης έγγραφος

Παράδειγμα

<html>
<body>
<p>Hello World!</p>
<div>
<p>Το DOM είναι πολύ χρήσιμο!</p>
<p>Αυτό το παράδειγμα δείχνει την ιδιότητα <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Παράδειγμα

<html>
<body>
<p>Hello World!</p>
<div>
<p>Το DOM είναι πολύ χρήσιμο!</p>
<p>Αυτό το παράδειγμα δείχνει την ιδιότητα <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Η ιδιότητα nodeName

nodeName Η ιδιότητα καθορίζει το όνομα του κόμβου.

  • Η ιδιότητα nodeName είναι只读的
  • Η ιδιότητα nodeName του κόμβου στοιχείου είναι ίση με το όνομα ετικέτας.
  • Η ιδιότητα nodeName του κόμβου χαρακτηριστικού είναι το όνομα του χαρακτηριστικού.
  • Η ιδιότητα nodeName του κόμβου κειμένου είναι always #text
  • Η ιδιότητα nodeName του κόμβου εγγράφου είναι always #document

Παράδειγμα

<h1 id="id01">Ο πρώτος μου ιστότοπος</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Δοκιμάστε το προσωπικά

Σημείωση:Η ιδιότητα nodeName περιέχει πάντα το μεγάλο όνομα ετικέτας του στοιχείου HTML.

Η ιδιότητα nodeValue

nodeValue Η ιδιότητα καθορίζει την τιμή του κόμβου.

  • Η ιδιότητα nodeValue του κόμβου στοιχείου είναι undefined.
  • Η ιδιότητα nodeValue του κόμβου κειμένου είναι το κείμενο.
  • Η ιδιότητα nodeValue του κόμβου είναι η τιμή του χαρακτηριστικού.

Η ιδιότητα nodeType

Η ιδιότητα nodeType επιστρέφει τον τύπο του κόμβου.Η ιδιότητα nodeType είναι只读的。

Παράδειγμα

<h1 id="id01">Ο πρώτος μου ιστότοπος</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Δοκιμάστε το προσωπικά

Η πιο σημαντική ιδιότητα nodeType είναι:

Κόμβος Τύπος Παράδειγμα
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (αποσύρθηκε)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Αυτό είναι σχόλιο -->
DOCUMENT_NODE 9 Το ίδιο το έγγραφο HTML (ο γονέας του <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Ο τύπος 2 έχει αποσυρθεί από τον HTML DOM. Δεν έχει αποσυρθεί από τον XML DOM.