Iebūvēto klašu hierarhija OOP JavaScript

Iebūvētajām klasēm arī ir hierarhija. Apskatīsim to ar rindkopas piemēru:

<p>text</p>

Iegūsim atsauci uz rindkopu mainīgajā:

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

Apskatīsim mūsu rindkopu konsolē:

console.dir(elem);

Kā jūs jau zināt, īpašībā [[Prototype]] tiek glabāts rindkopas klases nosaukums. Tas ir HTMLParagraphElement. Ja izvērsat šīs klases īpašību un metožu sarakstu, tad apakšā atkal tiks atklāta īpašība [[Prototype]], kas saturēs jau vecākklasi un tā būs HTMLElement. Arī tai var atrast vecāku un tā tālāk.

Izpētiet klašu hierarhiju šim tagam:

<div>text</div>

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

Izpētiet klašu hierarhiju šim tagam:

<input>

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

Izpētiet klašu hierarhiju šai kolekcijai:

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

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

Izpētiet klašu hierarhiju šai kolekcijai:

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

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

console.dir(elems);