Hierarchy of Built-in Classes in OOP in JavaScript

Built-in classes also have a hierarchy. Let's look at an example of a paragraph:

html<p>text</p>

Let's get a reference to the paragraph in a variable:

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

Let's look at our paragraph in the console:

javascriptconsole.dir(elem);

As you already know, the [[Prototype]] property contains the name of the paragraph class. This is HTMLParagraphElement. If you expand the list of properties and methods of this class, then at the bottom you will again find the [[Prototype]] property, which will already contain the parent class and this will be HTMLElement. You can also find a parent for it, and so on.

html<div>text</div>

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

html<input>

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

html<div>text</div>
<div>text</div>
<div>text</div>

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

html<div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

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

console.dir(elems);