Gerarchia delle classi integrate nella OOP in JavaScript

Anche le classi integrate hanno una gerarchia. Diamo un'occhiata all'esempio di un paragrafo:

<p>testo</p>

Otteniamo un riferimento al paragrafo in una variabile:

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

Osserviamo il nostro paragrafo nella console:

console.dir(elem);

Come già sapete, nella proprietà [[Prototype]] è contenuto il nome della classe del paragrafo. Questo è HTMLParagraphElement. Se si espande l'elenco delle proprietà e dei metodi di questa classe, in fondo si troverà nuovamente la proprietà [[Prototype]], che conterrà la classe genitore e sarà HTMLElement. Anche per questa si può trovare il genitore e così via.

Studia la gerarchia delle classi per questo tag:

<div>testo</div>

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

Studia la gerarchia delle classi per questo tag:

<input>

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

Studia la gerarchia delle classi per questa collezione:

<div>testo</div>
<div>testo</div>
<div>testo</div>

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

Studia la gerarchia delle classi per questa collezione:

<div>
	<p>testo</p>
	<p>testo</p>
	<p>testo</p>
</div>

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

console.dir(elems);