10. Πλοήγηση JavaScript HTML DOM

DOM Navigation


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


Κόμβοι DOM

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

  • Το όλο έγγραφο είναι ένας κόμβος εγγράφου
  • Κάθε στοιχείο HTML είναι ένας κόμβος στοιχείου
  • Το κείμενο μέσα στα στοιχεία HTML είναι κόμβοι κειμένου
  • Κάθε χαρακτηριστικό HTML είναι ένας κόμβος χαρακτηριστικού (deprecated)
  • Όλα τα σχόλια είναι κόμβοι σχολίων

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

Μπορούν να δημιουργηθούν νέοι κόμβοι και όλοι οι κόμβοι μπορούν να τροποποιηθούν ή να διαγραφούν.


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

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

Οι όροι γονέας, παιδί και αδελφός (parent, child, & sibling) χρησιμοποιούνται για να περιγράψουν τις σχέσεις.

  • Σε ένα δέντρο κόμβου, ο κορυφαίος κόμβος ονομάζεται root (ή ριζικός κόμβος)
  • Κάθε κόμβος έχει ακριβώς έναν γονέα, εκτός από τον root (ο οποίος δεν έχει γονέα)
  • Ένας κόμβος μπορεί να έχει πολλά παιδιά
  • Τα αδέλφια (siblings) είναι κόμβοι με τον ίδιο γονέα
<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Μάθημα πρώτο</h1>
    <p>Γεια σου κόσμε!</p>
  </body>

</html>

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

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

και:

  • <head> έχει ένα παιδί: <title>
  • <title> έχει ένα παιδί (έναν κόμβο κειμένου): “DOM Tutorial”
  • <body>έχει δύο παιδιά: <h1>και<p>
  • <h1> έχει ένα παιδί: “DOM μάθημα πρώτο”
  • <p> έχει ένα παιδί: “Γεια σου κόσμε!”
  • <h1>και <p>είναι αδέλφια

Πλοήγηση μεταξύ κόμβων

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

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

Κόμβοι παιδιών και τιμές κόμβων

Ένα κοινό σφάλμα στην επεξεργασία DOM είναι να περιμένουμε από έναν κόμβο στοιχείου να περιέχει κείμενο.

Παράδειγμα:

<title id="demo">DOM Tutorial</title

Ο κόμβος του στοιχείου <title>(στο παραπάνω παράδειγμα) δεν περιέχει κείμενο.

Περιέχει έναν κόμβο κειμένου με την τιμή “DOM Tutorial”.

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

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

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

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

Η πρόσβαση στο πρώτο παιδί μπορεί επίσης να γίνει όπως παρακάτω:

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

Όλα τα παρακάτω παραδείγματα (3) ανακτούν το κείμενο ενός <h1>στοιχείου και τα αντιγράφουν σε ένα <p>στοιχείο:

Παράδειγμα

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Δοκιμάστε το »

Παράδειγμα

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Δοκιμάστε το »

Παράδειγμα

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

Δοκιμάστε το »


InnerHTML

Σε αυτό το tutorial χρησιμοποιούμε την ιδιότητα innerHTML για να ανακτήσουμε το περιεχόμενο ενός στοιχείου HTML.

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


Κόμβοι ρίζας DOM

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

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

Παράδειγμα

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

Δοκιμάστε το »

Παράδειγμα

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>

Δοκιμάστε το »


Η ιδιότητα nodeName

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

  • Η nodeName είναι μόνο για ανάγνωση
  • Η nodeName ενός κόμβου στοιχείου είναι το ίδιο με το όνομα της ετικέτας (tag name)
  • Η nodeName ενός κόμβου χαρακτηριστικού είναι το όνομα του χαρακτηριστικού
  • Η nodeName ενός κόμβου κειμένου είναι πάντα #text
  • Η nodeName του κόμβου του εγγράφου είναι πάντα #document

Παράδειγμα

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Δοκιμάστε το »

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


Η ιδιότητα nodeValue

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

  • Η nodeValue για τους κόμβους των στοιχείων είναι null
  • Η nodeValue για κόμβους κειμένου είναι το ίδιο το κείμενο
  • Η nodeValue για τους κόμβους χαρακτηριστικών είναι η τιμή του χαρακτηριστικού

Η ιδιότητα nodeType

Η nodeTypeιδιότητα είναι μόνο για ανάγνωση. Επιστρέφει τον τύπο ενός κόμβου.

Παράδειγμα

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Δοκιμάστε το »

Οι πιο σημαντικές ιδιότητες nodeType είναι:

ΚόμβοςΤύποςΠαράδειγμα
ELEMENT_NODE1<h1 class=”heading”>W3Schools</h1>
ATTRIBUTE_NODE2 class = “heading” (deprecated)
TEXT_NODE3W3Schools
COMMENT_NODE8<!– This is a comment –>
DOCUMENT_NODE9The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE10<!Doctype html>

Ο τύπος 2 έχει καταργηθεί στο HTML DOM (αλλά λειτουργεί). Δεν έχει καταργηθεί στο XML DOM.

Days
Hours
Minutes

10. Πλοήγηση JavaScript HTML DOM

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: