JavaScript DOM Navigation

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

Εμφάνιση πίνακα περιεχομένων

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

Κόμβοι DOM

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

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

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

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

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

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

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

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

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</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[nodennumber]
firstChild
lastChild
nextSibling
previousSibling

Θυγατρικοί κόμβοι και τιμές κόμβων

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

Παράδειγμα :

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

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

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

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

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

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

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

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

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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE 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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></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>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p 
id="demo"></p>
<script>
document.getElementById("demo").innerHTML 
= document.body.innerHTML;
</script>

</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Παράδειγμα

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
document.documentElement.innerHTML;
</script>

</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

Η ιδιότητα nodeName

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

Το nodeName είναι μόνο για ανάγνωση
nodeName ενός κόμβου στοιχείου είναι το ίδιο με το όνομα της ετικέτας
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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Σημείωση: 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>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

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

Node	Type	Example
ELEMENT_NODE	1	<h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE	2	class = "heading" (deprecated)
TEXT_NODE	3	W3Schools
COMMENT_NODE	8	<!-- This is a comment -->
DOCUMENT_NODE	9	The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE	10	<!Doctype html>

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