Gerarchia delle classi integrate nella OOP in JavaScript

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

html<p>testo</p>

Otteniamo un riferimento al paragrafo in una variabile:

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

Osserviamo il nostro paragrafo nella console:

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

html<div>testo</div>

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

html<input>

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

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

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

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

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

console.dir(elems);