Η κατανόηση του DOM είναι απαραίτητη στην καριέρα σας στην ανάπτυξη Ιστού. Θα πρέπει να γνωρίζετε πώς να επιλέγετε διαφορετικά στοιχεία στο DOM, ώστε να μπορείτε στη συνέχεια να διαβάσετε τα περιεχόμενά τους ή να τα τροποποιήσετε.

Η διέλευση DOM περιγράφει τον τρόπο πλοήγησης στη δομή που μοιάζει με δέντρο που δημιουργούν τα έγγραφα HTML. Ακολουθεί ένας πλήρης οδηγός για το πώς να διασχίσετε το DOM με JavaScript.

Τι είναι η διέλευση DOM;

ο Μοντέλο αντικειμένου εγγράφου, ή DOM για συντομία, είναι μια δενδροειδής αναπαράσταση ενός εγγράφου HTML. Παρέχει ένα API που σας επιτρέπει, ως προγραμματιστή ιστού, να αλληλεπιδράτε με έναν ιστότοπο χρησιμοποιώντας JavaScript.

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

Η διέλευση DOM (ονομάζεται επίσης περπάτημα ή πλοήγηση στο DOM) είναι η πράξη επιλογής κόμβων στο δέντρο DOM από άλλους κόμβους. Πιθανότατα είστε ήδη εξοικειωμένοι με διάφορες μεθόδους για πρόσβαση σε στοιχεία στο δέντρο DOM

instagram viewer
με το αναγνωριστικό, την κλάση ή το όνομα ετικέτας τους. Μπορείτε να χρησιμοποιήσετε μεθόδους όπως document.querySelector() και document.getElementById() να το πράξουν.

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

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

Ένα δείγμα εγγράφου για το Traverse

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

Η πρώτη μέθοδος περιλαμβάνει την αναζήτηση ενός στοιχείου που ξεκινά με έναν κορυφαίο κόμβο (όπως ο κόμβος εγγράφου) και κινείται προς τα κάτω.

Ο δεύτερος τρόπος είναι το αντίθετο: μετακινείστε από ένα εσωτερικό στοιχείο πάνω στο δέντρο, αναζητώντας ένα εξωτερικό στοιχείο. Η τελευταία μέθοδος είναι όταν αναζητάτε ένα στοιχείο από ένα άλλο στοιχείο στο ίδιο επίπεδο (που σημαίνει ότι τα δύο στοιχεία είναι αδέλφια) στο δέντρο εγγράφων.

Για να το δείξετε, εξετάστε αυτό το παράδειγμα εγγράφου HTML:

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Συμβατό" περιεχόμενο="IE=ακμή" />
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1,0" />
<τίτλος>Δείγμα σελίδας</title>
</head>
<σώμα>
<κύριος>
<h1>Ο τίτλος της σελίδας μου</h1>
<Π>Η ωραία λεζάντα πηγαίνει εδώ</Π>


<κατηγορία άρθρου="πρώτο__άρθρο">
<h2>Λίστα με καταπληκτικά φρούτα</h2>
<Π>Πρέπει να τρώτε φρούτα</Π>


<div class="περιτύλιγμα-1">
<ul class="apple-list">
<li class="μήλο">Μήλα</li>
<li class="πορτοκάλι">Πορτοκάλια</li>
<li class="αβοκάντο">Αβοκάντο</li>
<li class="σταφύλι">
 σταφύλια


<ul>
<li class="τύπου-1">Σελήνη πέφτει</li>
<li>Σουλτάνα</li>
<li>Ομόνοια</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li class="μπανάνα">Μπανάνες</li>
</ul>


<κλάση κουμπιού="btn-1">Διαβάστε την πλήρη λίστα</button>
</div>
</article>


<κατηγορία άρθρου="δεύτερο__άρθρο">
<h2>Καταπληκτικά μέρη στην Κένυα</h2>
<Π>Πρέπει να επισκεφτείτε μέρη στην Κένυα</Π>


<div class="περιτύλιγμα-2">
<ul class="θέσεις-λίστα">
<li>Μασάι Μάρα</li>
<li>Παραλία Diani</li>
<li>Παραλία Watamu</li>
<li>Εθνικό πάρκο Amboseli</li>
<li>Λίμνη Nakuru</li>
</ul>


<κλάση κουμπιού="btn-2">Διαβάστε την πλήρη λίστα</button>
</div>
</article>
</main>
</body>
</html>

Διασχίζοντας το DOM προς τα κάτω

Μπορείτε να διασχίσετε το DOM προς τα κάτω χρησιμοποιώντας μία από τις δύο μεθόδους. Η πρώτη είναι η μέθοδος κοινού επιλογέα (στοιχείο.querySelector ή στοιχείο.querySelectorAll). Δεύτερον, μπορείτε να χρησιμοποιήσετε το παιδιά ή childNodes ιδιοκτησία. Υπάρχουν επίσης δύο άλλες ειδικές ιδιότητες, συγκεκριμένα, τελευταίο παιδί και πρώτο παιδί.

Χρήση μεθόδων επιλογής

Οι μέθοδοι querySelector() σάς επιτρέπουν να αναζητήσετε ένα ή περισσότερα στοιχεία που ταιριάζουν με έναν δεδομένο επιλογέα. Για παράδειγμα, μπορείτε να αναζητήσετε το πρώτο στοιχείο με μια κλάση "πρώτου άρθρου" χρησιμοποιώντας document.querySelector('.first-article'). Και να τα φέρω όλα h2 στοιχεία στο έγγραφο, μπορείτε να χρησιμοποιήσετε το querySelectorAll μέθοδος: document.querySelectorAll('h2'). ο querySelectorAll Η μέθοδος επιστρέφει μια λίστα κόμβων με στοιχεία που ταιριάζουν. μπορείτε να επιλέξετε κάθε στοιχείο χρησιμοποιώντας σημειογραφία αγκύλης:

συνθ επικεφαλίδες = έγγραφο.querySelectorAll('h2');
συνθ firstHeading = επικεφαλίδες[0]; // επιλέγοντας το πρώτο στοιχείο h2
συνθ secondHeading = επικεφαλίδες[1]; // επιλέγοντας το δεύτερο στοιχείο h2

Το σημαντικότερο σημείο κατά τη χρήση μεθόδων επιλογής είναι ότι πρέπει να χρησιμοποιείτε τα κατάλληλα σύμβολα, όπου υπάρχουν, πριν από τον επιλογέα όπως κάνετε στο CSS. Για παράδειγμα, ".classname" για κλάσεις και "#id" για αναγνωριστικά.

Θυμηθείτε ότι το αποτέλεσμα θα είναι ένα στοιχείο HTML, όχι μόνο το εσωτερικό περιεχόμενο του επιλεγμένου στοιχείου. Για πρόσβαση στο περιεχόμενο, μπορείτε να χρησιμοποιήσετε τον κόμβο innerHTML ιδιοκτησία:

έγγραφο.querySelector('.πορτοκαλί').innerHTML

Χρήση των ιδιοτήτων παιδιών ή childNodes

ο παιδιά Η ιδιότητα επιλέγει όλα τα θυγατρικά στοιχεία που βρίσκονται απευθείας κάτω από ένα δεδομένο στοιχείο. Εδώ είναι ένα παράδειγμα του παιδιά ιδιοκτησία σε δράση:

συνθ appleList = έγγραφο.querySelector('.apple-list');
συνθ apples = appleList.children; 
κονσόλα.log (μήλα);

Ξύλευση μήλα στην κονσόλα θα εμφανίσει ένα σύνολο από όλα τα στοιχεία λίστας απευθείας κάτω από το στοιχείο με μια κλάση "apple-list" ως συλλογή HTML. Μια συλλογή HTML είναι ένα αντικείμενο που μοιάζει με πίνακα, επομένως μπορείτε να χρησιμοποιήσετε σημειογραφία αγκύλης για να επιλέξετε στοιχεία, όπως με το querySelectorAll.

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

Χρήση ειδικών ιδιοτήτων lastChild και firstChild

Αυτές οι δύο μέθοδοι δεν είναι τόσο ισχυρές όσο οι δύο πρώτες. Όπως υποδηλώνουν τα ονόματά τους, το τελευταίο παιδί και πρώτο παιδί Οι ιδιότητες επιστρέφουν τον τελευταίο και τον πρώτο θυγατρικό κόμβο ενός στοιχείου.

συνθ appleList = έγγραφο.querySelector('.apple-list');
συνθ firstChild = appleList.firstChild;
συνθ lastChild = appleList.lastChild;

Διασχίζοντας το DOM προς τα πάνω

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

Χρησιμοποιώντας το parentElement ή το parentNode

Και τα δυο γονικό στοιχείο ή γονικός κόμβος Οι ιδιότητες σάς επιτρέπουν να επιλέξετε τον γονικό κόμβο του επιλεγμένου στοιχείου ένα επίπεδο πάνω. Η κρίσιμη διαφορά είναι ότι γονικό στοιχείο επιλέγει μόνο τον γονικό κόμβο που είναι στοιχείο. Αφ 'ετέρου, γονικός κόμβος μπορεί να επιλέξει έναν γονέα ανεξάρτητα από το αν πρόκειται για στοιχείο ή διαφορετικό τύπο κόμβου.

Στο παρακάτω δείγμα κώδικα, χρησιμοποιούμε γονικό στοιχείο για να επιλέξετε το div με την κλάση "wrapper-1" από το "apple-list":

συνθ appleList = έγγραφο.querySelector('.apple-list');
συνθ parentDiv = appleList.parentElement; 
κονσόλα.log (parentDiv); // εμφανίζει το στοιχείο div με κλάση wrapper-1

Χρήση της πλησιέστερης ιδιοκτησίας

ο πλησιέστερο Η ιδιότητα επιλέγει το πρώτο γονικό στοιχείο που ταιριάζει με έναν καθορισμένο επιλογέα. Σας επιτρέπει να επιλέξετε πολλαπλά επίπεδα προς τα πάνω αντί για ένα. Για παράδειγμα, εάν έχουμε ήδη επιλέξει το κουμπί με την κλάση "btn-1", μπορούμε να επιλέξουμε το κύριος στοιχείο χρησιμοποιώντας το πλησιέστερο ιδιοκτησία ως εξής:

συνθ btn1 = έγγραφο.querySelector('.btn-1');
const mainEl = btn1.closest('κύριος');
κονσόλα.log (mainEl); // εμφανίζει το κύριο στοιχείο

Αρέσει querySelector και querySelectorAll, χρησιμοποιήστε κατάλληλους επιλογείς στο πλησιέστερο μέθοδος.

Διασχίζοντας το DOM Πλάγια

Υπάρχουν δύο διαθέσιμες μέθοδοι για να περπατήσετε το DOM στο πλάι. Μπορείς να χρησιμοποιήσεις nextElementSibling ή previousElementSibling. Χρήση nextElementSibling για να επιλέξετε το ακόλουθο αδελφικό στοιχείο και previousElementSibling για να επιλέξετε το προηγούμενο αδερφάκι.

συνθ πορτοκαλί = έγγραφο.querySelector('.πορτοκαλί');
συνθ apple = orange.previousElementSibling;
συνθ αβοκάντο = πορτοκάλι.nextElementSibling;

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

Κάντε περισσότερα αλυσιδώνοντας τις ιδιότητες και τις μεθόδους διέλευσης DOM

Όλες οι παραπάνω μέθοδοι και ιδιότητες μπορούν να σας επιτρέψουν να επιλέξετε οποιονδήποτε κόμβο στο DOM. Ωστόσο, σε ορισμένες περιπτώσεις, μπορεί να θέλετε να μετακινηθείτε πρώτα προς τα πάνω, μετά προς τα κάτω ή στο πλάι. Σε αυτή την περίπτωση, η σύνδεση διαφορετικών ιδιοτήτων μαζί θα αποδειχθεί χρήσιμη.