Ενσωματωμένες Κλάσεις DOM JavaScript

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

html<p>κείμενο</p>

Ας πάρουμε μια αναφορά σε αυτήν σε μια μεταβλητή:

javascriptlet elem = document.querySelector('p');

Ας εμφανίσουμε αυτήν την παράγραφο στην κονσόλα:

javascriptconsole.log(elem);

Και τώρα ας δούμε τη λίστα των ιδιοτήτων και των μεθόδων της παραγράφου μας:

javascriptconsole.dir(elem);

Μπορούμε να προσδιορίσουμε σε ποια κλάση ανήκει η παράγραφός μας. Για αυτό στη λίστα των ιδιοτήτων πρέπει να βρούμε μια ειδική ιδιότητα [[Prototype]]. Σε αυτή βλέπουμε ότι η παράγραφος ανήκει στην κλάση HTMLParagraphElement. Ας το ελέγξουμε:

javascriptconsole.log(elem instanceof HTMLParagraphElement); // true

Задание 1

Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:

html<div>κείμενο</div>

javascriptlet elem = document.querySelector('div');
console.dir(elem);

Προσδιορίστε σε ποια κλάση ανήκει αυτή η ετικέτα.

Задание 2

Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:

html<input>

javascriptlet elem = document.querySelector('input');
console.dir(elem);

Προσδιορίστε σε ποια κλάση ανήκει αυτή η ετικέτα.

Задание 3

Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:

html<div>κείμενο</div>
<div>κείμενο</div>
<div>κείμενο</div>

javascriptlet elems = document.querySelectorAll('div');
console.dir(elems);

Προσδιορίστε σε ποια κλάση ανήκει το αποτέλεσμα.

Задание 4

Μελετήστε το αποτέλεσμα της εκτέλεσης του ακόλουθου κώδικα:

html<div>
  <p>κείμενο</p>
  <p>κείμενο</p>
  <p>κείμενο</p>
</div>

javascriptlet elem = document.querySelector('div');
let elems = elem.children;

console.dir(elems);

Προσδιορίστε σε ποια κλάση ανήκει το αποτέλεσμα.