Hierarquia de classes incorporadas em POO em JavaScript

As classes incorporadas também têm uma hierarquia. Vamos ver com o exemplo de um parágrafo:

html<p>texto</p>

Vamos obter a referência ao parágrafo em uma variável:

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

Vamos olhar para o nosso parágrafo no console:

javascriptconsole.dir(elem);

Como você já sabe, na propriedade [[Prototype]] está contido o nome da classe do parágrafo. É HTMLParagraphElement. Se você expandir a lista de propriedades e métodos desta classe, então na parte inferior encontrará novamente a propriedade [[Prototype]], que conterá a classe pai e será HTMLElement. Para ele também é possível encontrar o pai e assim por diante.

html<div>texto</div>

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

html<input>

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

html<div>texto</div>
<div>texto</div>
<div>texto</div>

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

html<div>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

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

console.dir(elems);