Ενσωματωμένες Κλάσεις DOM JavaScript
Τα στοιχεία DOM αντιπροσωπεύουν επίσης αντικείμενα ενσωματωμένων κλάσεων. Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια παράγραφο:
<p>κείμενο</p>
Ας πάρουμε μια αναφορά σε αυτήν σε μια μεταβλητή:
let elem = document.querySelector('p');
Ας εμφανίσουμε αυτήν την παράγραφο στην κονσόλα:
console.log(elem);
Και τώρα ας δούμε τη λίστα των ιδιοτήτων και των μεθόδων της παραγράφου μας:
console.dir(elem);
Μπορούμε να προσδιορίσουμε σε ποια κλάση
ανήκει η παράγραφός μας. Για αυτό
στη λίστα των ιδιοτήτων πρέπει να βρούμε μια ειδική
ιδιότητα [[Prototype]]. Σε αυτή βλέπουμε
ότι η παράγραφος ανήκει
στην κλάση HTMLParagraphElement.
Ας το ελέγξουμε:
console.log(elem instanceof HTMLParagraphElement); // true
Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:
<div>κείμενο</div>
let elem = document.querySelector('div');
console.dir(elem);
Προσδιορίστε σε ποια κλάση ανήκει αυτή η ετικέτα.
Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:
<input>
let elem = document.querySelector('input');
console.dir(elem);
Προσδιορίστε σε ποια κλάση ανήκει αυτή η ετικέτα.
Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:
<div>κείμενο</div>
<div>κείμενο</div>
<div>κείμενο</div>
let elems = document.querySelectorAll('div');
console.dir(elems);
Προσδιορίστε σε ποια κλάση ανήκει το αποτέλεσμα.
Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:
<div>
<p>κείμενο</p>
<p>κείμενο</p>
<p>κείμενο</p>
</div>
let elem = document.querySelector('div');
let elems = elem.children;
console.dir(elems);
Προσδιορίστε σε ποια κλάση ανήκει το αποτέλεσμα.
