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:

<p>texto</p>

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

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

Vamos olhar para o nosso parágrafo no console:

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

Estude a hierarquia de classes para esta tag:

<div>texto</div>

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

Estude a hierarquia de classes para esta tag:

<input>

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

Estude a hierarquia de classes para esta coleção:

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

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

Estude a hierarquia de classes para esta coleção:

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

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

console.dir(elems);