Hijerarhija ugrađenih klasa u OOP u JavaScript-u

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

<p>tekst</p>

Dobijamo referencu na paragraf u promenljivu:

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

Pogledajmo naš paragraf u konzoli:

console.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.

Proučite hijerarhiju klasa za ovaj tag:

<div>tekst</div>

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

Proučite hijerarhiju klasa za ovaj tag:

<input>

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

Proučite hijerarhiju klasa za ovu kolekciju:

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

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

Proučite hijerarhiju klasa za ovu kolekciju:

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

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

console.dir(elems);