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

Το DOM είναι αντικειμενοστρεφές. Κάθε στοιχείο στο DOM έχει το δικό του σύνολο χαρακτηριστικών και μεθόδων στις οποίες μπορείτε να έχετε πρόσβαση χρησιμοποιώντας JavaScript.

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

Πώς να αποκτήσετε πρόσβαση στα στοιχεία DOM

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

καλως ΗΡΘΑΤΕ


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Σχετικά με


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;





instagram viewer

 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Άρθρα



Τίτλος άρθρου 1


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Διαβάστε περισσότερα 





Τίτλος άρθρου δύο


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Διαβάστε περισσότερα 





Τίτλος άρθρου Τρίτο


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Διαβάστε περισσότερα 





Τίτλος άρθρου Τέταρτο


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat;
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Διαβάστε περισσότερα 

Πληκτρολόγηση έγγραφο στην κονσόλα του προγράμματος περιήγησής σας και πατώντας enter θα βγει η ακόλουθη έξοδος:

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

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

Σχετίζεται με: The Hidden Hero of Websites: Understanding the DOM

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

έγγραφο.σώμα

Αυτό θα παράγει την ακόλουθη έξοδο:

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

Τι είναι οι επιλογείς στοιχείων DOM;

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

Αυτές οι συναρτήσεις λειτουργούν με παρόμοιο τρόπο με τους επιλογείς CSS. Σας επιτρέπουν να ανακτήσετε στοιχεία με βάση το όνομα της ετικέτας τους ή τα χαρακτηριστικά αναγνωριστικού και κλάσης τους. Μπορείτε ακόμη και να ανακτήσετε στοιχεία χρησιμοποιώντας οποιονδήποτε επιλογέα CSS.

Σχετίζεται με: Πώς να στοχεύσετε μέρος μιας ιστοσελίδας χρησιμοποιώντας επιλογείς CSS

Οι επιλογείς ενός στοιχείου είναι:

• getElementById()
• querySelector()

Οι επιλογείς πολλαπλών στοιχείων είναι:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

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

Χρήση επιλογέων μεμονωμένων στοιχείων DOM

Θα δείτε κυρίως επιλογείς σε εφαρμογές JavaScript. Λοιπόν, ας απομακρυνθούμε από την κονσόλα. Δημιουργήστε ένα αρχείο JavaScript και συνδέστε το με το αρχείο HTML χρησιμοποιώντας την ακόλουθη ετικέτα σεναρίου:

Όπου η τιμή src είναι το όνομα του αρχείου JavaScript. Τοποθετήστε αυτήν την ετικέτα δέσμης ενεργειών ακριβώς πριν από το κλείσιμο της ετικέτας σώματος, .

ο getElementById() μέθοδος παρέχει πρόσβαση σε ένα μεμονωμένο στοιχείο σε μια ιστοσελίδα χρησιμοποιώντας την τιμή του αναγνωριστικού του. Στο παραπάνω έγγραφο HTML υπάρχουν πολλά στοιχεία με αναγνωριστικά. Για να στοχεύσετε το div στοιχείο με το αναγνωριστικό «article-3» μπορείτε να προσθέσετε τον ακόλουθο κώδικα στο αρχείο JavaScript:

value = document.getElementById('article-3')

Τώρα το στοιχείο div με το άρθρο-3 Το ID και όλες οι αντίστοιχες ιδιότητες του είναι προσβάσιμες από το αξία μεταβλητός. Μπορείτε να εκτυπώσετε το αξία μεταβλητή στην κονσόλα χρησιμοποιώντας την ακόλουθη γραμμή κώδικα:

console.log (τιμή)

Θα δείτε το όνομα της κλάσης που έχει εκχωρηθεί στο στοιχείο div καθώς και άλλα σημαντικά χαρακτηριστικά, όπως το εσωτερικό HTML.

Ο άλλος επιλογέας ενός στοιχείου είναι το querySelector(). Αυτή η λειτουργία είναι πιο ευέλικτη, καθώς μπορείτε να τη μεταδώσετε οποιαδήποτε συμβολοσειρά επιλογέα CSS. Ωστόσο, μπορείτε να το χρησιμοποιήσετε μόνο για να επιλέξετε ένα στοιχείο κάθε φορά.

Για παράδειγμα, υπάρχει μια κλάση στην παραπάνω διάταξη HTML—άρθρα. Τέσσερα στοιχεία div χρησιμοποιούν αυτήν την κλάση, αλλά το querySelector() Η συνάρτηση θα επιστρέψει μόνο το πρώτο στοιχείο που έχει την κλάση "άρθρα".

Χρήση του querySelector() με μια κλάση

Προσθέστε τον ακόλουθο κώδικα στο τέλος του σεναρίου σας:

value = document.querySelector('.articles')
console.log (τιμή)

Αυτό θα επιστρέψει μόνο το πρώτο div στοιχείο με κλάση «άρθρα». Σημειώστε ότι καθορίζετε τον επιλογέα στην ίδια μορφή με έναν επιλογέα CSS. Στο CSS, μια αρχική περίοδος καθορίζει ένα όνομα κλάσης.

Χρήση querySelector() με αναγνωριστικό

value = document.querySelector('#article-3')
console.log (τιμή)

Αυτός ο κωδικός θα επιστρέψει το μόνο στοιχείο με αναγνωριστικό "άρθρο-3", το τρίτο div στοιχείο με κλάση «άρθρα». Και πάλι, η συμβολοσειρά επιλογής χρησιμοποιεί τυπική σύνταξη CSS, με a # σύμβολο που καθορίζει ένα αναγνωριστικό.

Χρήση πολλαπλών επιλογέων στοιχείων DOM

Οι υπόλοιπες λειτουργίες επιλογέα ανακτούν ομάδες στοιχείων. Αυτοί είναι getElementsByTagName(), getElementsByClassName(), και querySelectorAll().

Χρησιμοποιώντας το getElementsByTagName()

ο getElementsByTagName() ο επιλογέας ανακτά μια ομάδα στοιχείων με το ίδιο όνομα ετικέτας. Για παράδειγμα, εάν θέλετε να επιλέξετε όλα τα h2 στοιχεία σε μια ιστοσελίδα, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:

value = document.getElementsByTagName('h2')
console.log (τιμή)

Αυτό αποθηκεύει όλα τα στοιχεία h2 σε μια συλλογή HTML που ονομάζεται τιμή.

Χρησιμοποιώντας το getElementsByClassName()

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

value = document.getElementsByClassName('articles')
console.log (τιμή)

Η εισαγωγή του παραπάνω κώδικα στο αρχείο JavaScript θα επιστρέψει τα τέσσερα στοιχεία div με το όνομα κλάσης «άρθρα» στην κονσόλα του προγράμματος περιήγησης.

Χρήση του querySelectorAll()

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

value = document.querySelectorAll('#blog p')
console.log (τιμή)

Μπορείτε ακόμη να συμπεριλάβετε πολλούς επιλογείς στη συμβολοσειρά, χωρίζοντας τον καθένα με κόμμα, όπως ακριβώς στο CSS:

value = document.querySelectorAll('h2, .articles')
console.log (τιμή)

Χρησιμοποιήστε επιλογείς DOM για να δημιουργήσετε δυναμικές ιστοσελίδες

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

Ωστόσο, η απόκτηση πρόσβασης σε στοιχεία HTML είναι μόνο το πρώτο βήμα σε αυτό που μπορείτε να κάνετε με τους επιλογείς DOM. Οι επιλογείς DOM θα σας βοηθήσουν πολύ να αναπτύξετε τις λειτουργικές πτυχές του ιστότοπού σας, όπως ο χειρισμός συμβάντων onclick και onscroll.

Πώς να κάνετε τον ιστότοπό σας αποκριτικό και διαδραστικό με CSS και JavaScript

Έχετε ρυθμίσει τον ιστότοπό σας με HTML και CSS, αλλά τώρα πρέπει να προσθέσετε λογική. Εδώ είναι τι πρέπει να κάνετε.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα