Jerarquía de clases integradas en POO en JavaScript

Las clases integradas también tienen una jerarquía. Veamos con un ejemplo de párrafo:

<p>texto</p>

Obtengamos una referencia al párrafo en una variable:

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

Miremos nuestro párrafo en la consola:

console.dir(elem);

Como ya sabes, en la propiedad [[Prototype]] se encuentra el nombre de la clase del párrafo. Este es HTMLParagraphElement. Si despliegas la lista de propiedades y métodos de esta clase, en la parte inferior aparecerá nuevamente la propiedad [[Prototype]], que contendrá la clase padre y esta será HTMLElement. Para ella también se puede encontrar el padre y así sucesivamente.

Estudia la jerarquía de clases para esta etiqueta:

<div>texto</div>

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

Estudia la jerarquía de clases para esta etiqueta:

<input>

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

Estudia la jerarquía de clases para esta colección:

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

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

Estudia la jerarquía de clases para esta colección:

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

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

console.dir(elems);