Hiërarchie van ingebouwde klassen in OOP in JavaScript

Ingebouwde klassen hebben ook een hiërarchie. Laten we kijken naar het voorbeeld van een alinea:

<p>text</p>

We krijgen een referentie naar de alinea in een variabele:

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

Laten we naar onze alinea in de console kijken:

console.dir(elem);

Zoals je al weet, bevat de eigenschap [[Prototype]] de klassenaam van de alinea. Dit is HTMLParagraphElement. Als je de lijst met eigenschappen en methoden van deze klasse uitvouwt, dan vind je onderaan weer de eigenschap [[Prototype]], die dan de bovenliggende klasse bevat en dat is HTMLElement. Hiervoor kan ook een bovenliggende klasse worden gevonden, en zo verder.

Bestudeer de hiërarchie van klassen voor deze tag:

<div>text</div>

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

Bestudeer de hiërarchie van klassen voor deze tag:

<input>

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

Bestudeer de hiërarchie van klassen voor deze collectie:

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

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

Bestudeer de hiërarchie van klassen voor deze collectie:

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

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

console.dir(elems);