Hijerarhija ugrađenih klasa u OOP u JavaScript-u

Ugrađene klase takođe imaju hijerarhiju. Pogledajmo na primeru paragrafa:

html<p>tekst</p>

Dobijamo referencu na paragraf u promenljivu:

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

Pogledajmo naš paragraf u konzoli:

javascriptconsole.dir(elem);

Kao što već znate, u svojstvu [[Prototype]] se nalazi ime klase paragrafa. To je HTMLParagraphElement. Ako proširite listu svojstava i metoda ove klase, onda ćete opet na dnu otkriti svojstvo [[Prototype]], koje će sadržati roditeljsku klasu i to će biti HTMLElement. Za nju takođe možete pronaći roditelja i tako dalje.

Задание 1

Proučite hijerarhiju klasa za ovaj tag:

html<div>tekst</div>

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

Задание 2

Proučite hijerarhiju klasa za ovaj tag:

html<input>

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

Задание 3

Proučite hijerarhiju klasa za ovu kolekciju:

html<div>tekst</div>
<div>tekst</div>
<div>tekst</div>

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

Задание 4

Proučite hijerarhiju klasa za ovu kolekciju:

html<div>
  <p>tekst</p>
  <p>tekst</p>
  <p>tekst</p>
</div>

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

console.dir(elems);