Hierarhija vgrajenih razredov v OOP v JavaScript

Tudi vgrajeni razredi imajo hierarhijo. Poglejmo si na primeru odstavka:

<p>text</p>

Pridobimo referenco na odstavek v spremenljivko:

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

Poglejmo si naš odstavek v konzoli:

console.dir(elem);

Kot že veste, v lastnosti [[Prototype]] vsebuje ime razreda odstavka. To je HTMLParagraphElement. Če razširite seznam lastnosti in metod tega razreda, potem spodaj spet odkrijete lastnost [[Prototype]], ki bo vsebovala že nadrejeni razred in to bo HTMLElement. Zanj je mogoče najti tudi nadrejenega in tako naprej.

Preučite hierarhijo razredov za to oznako:

<div>text</div>

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

Preučite hierarhijo razredov za to oznako:

<input>

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

Preučite hierarhijo razredov za to zbirko:

<div>text</div>
<div>text</div>
<div>text</div>

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

Preučite hierarhijo razredov za to zbirko:

<div>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

console.dir(elems);