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:

html<p>texto</p>

Obtengamos una referencia al párrafo en una variable:

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

Miremos nuestro párrafo en la consola:

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

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);