Iebūvēto klašu hierarhija OOP JavaScript

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

html<p>text</p>

Iegūsim atsauci uz rindkopu mainīgajā:

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

Apskatīsim mūsu rindkopu konsolē:

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

Задание 1

Izpētiet klašu hierarhiju šim tagam:

html<div>text</div>

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

Задание 2

Izpētiet klašu hierarhiju šim tagam:

html<input>

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

Задание 3

Izpētiet klašu hierarhiju šai kolekcijai:

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

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

Задание 4

Izpētiet klašu hierarhiju šai kolekcijai:

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

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

console.dir(elems);