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:

<p>text</p>

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

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

Let's look at our paragraph in the console:

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

Examine the class hierarchy for this tag:

<div>text</div>

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

Examine the class hierarchy for this tag:

<input>

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

Examine the class hierarchy for this collection:

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

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

Examine the class hierarchy for this collection:

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

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

console.dir(elems);