Πρόσβαση σε στοιχεία DOM στην κονσόλα - Ένας οδηγός βήμα προς βήμα

Σε αυτό το εγχειρίδιο θα μάθεις πώς να έχεις πρόσβαση σε στοιχεία DOM στην κονσόλα του Chrome Developer Tools. Αυτό είναι ιδιαίτερα σημαντικό για τους web developers που εργάζονται με στοιχεία HTML και JavaScript. Στο video-τιτοριαλ θα μάθεις πολλές χρήσιμες συμβουλές και κόλπα για την απλή επιλογή και την επεξεργασία των στοιχείων του DOM.

Σημαντικές Ανακαλύψεις

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

Οδηγίες Βήμα-προς-Βήμα

Πρώτα πρέπει να βεβαιωθείς ότι έχεις ανοίξει τα Chrome Developer Tools. Μπορείς να το κάνεις κάνοντας δεξί κλικ σε μια ιστοσελίδα και επιλέγοντας "Επιθεώρηση" ή χρησιμοποιώντας τον συνδυασμό πλήκτρων Ελέγχου + Μετατόπιση + I.

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

Αν έχεις ένα στοιχείο DOM στη σελίδα σου, όπως για παράδειγμα ένα με το ID "App", μπορείς να αναφερθείς αυτό το στοιχείο απευθείας μέσω της κονσόλας. Όλα τα στοιχεία με ένα ID είναι παγκόσμια διαθέσιμα στο αντικείμενο window.

Μπορείς εύκολα να καλέσεις αυτό το ID πληκτρολογώντας window.App στην κονσόλα. Θα σου εμφανίσει το αντίστοιχο στοιχείο DOM και θα μπορείς να το αναπτύξεις για να έχεις πρόσβαση στα υποστοιχεία και τα γνωρίσματά του.

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

Για να δεις όλες τις ιδιότητες και τις λειτουργίες ενός στοιχείου DOM, υπάρχει η συνάρτηση console.dir(). Αν πληκτρολογήσεις console.dir(window.App), θα πάρεις μια σαφή αναπαράσταση όλων των ιδιοτήτων και μεθόδων του στοιχείου DOM.

Αν ένα στοιχείο δεν έχει ID, μπορείς να έχεις πρόσβαση ακόμα σε αυτό χρησιμοποιώντας το document.querySelector(). Αυτό λειτουργεί επίσης για ολόκληρο το document.body αν θέλεις να έχεις πρόσβαση σε αυτό.

Για πιο ειδικές επιλογές, μπορείς να χρησιμοποιήσεις το document.querySelector() ή ακόμα και το document.querySelectorAll(), για να πάρεις μια λίστα των στοιχείων που ταυτίζονται με τον δεδομένο επιλογέα.

Αυτές οι λίστες μπορούν να χειριστούν όπως πίνακες, έτσι μπορείς να τις μετατρέψεις με το Array.from() για να εργαστείς με τα στοιχεία τους.

Ένα βολικό συντόμευση που μπορείς να χρησιμοποιήσεις στην κονσόλα είναι το $0. Με αυτό, έχεις πρόσβαση στο τρέχον επιλεγμένο στοιχείο DOM στην καρτέλα Elements. Αν πληκτρολογήσεις $0 και πατήσεις επιστροφή, θα δεις ποιο στοιχείο είναι επί του παρόντος επιλεγμένο.

Επιπλέον, εισήχθησαν επίσης τα $1, $2, κ.λπ., για να έχεις πρόσβαση σε προηγούμενες επιλογές. Το $1 είναι το στοιχείο που είχες επιλέξει προηγουμένως πριν επιλέξεις το τρέχον.

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

Θυμήσου ότι κατά τη χρήση των console.dir() και παρόμοιων λειτουργιών πρέπει να είσαι προσεκτικός. Αυτά πρέπει να χρησιμοποιούνται κυρίως για σκοπούς εντοπισμού σφαλμάτων και όχι για να χρησιμοποιούνται σε κώδικα παραγωγής.

Μπορείς τώρα εύκολα να έχεις πρόσβαση σε στοιχεία DOM που είναι επί του παρόντος επιλεγμένα και δεν χρειάζεσαι ειδικά IDs ή πολύπλοκους επιλογείς γι' αυτό.

Σύνοψη

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