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:

html<p>text</p>

We krijgen een referentie naar de alinea in een variabele:

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

Laten we naar onze alinea in de console kijken:

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

Задание 1

Bestudeer de hiërarchie van klassen voor deze tag:

html<div>text</div>

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

Задание 2

Bestudeer de hiërarchie van klassen voor deze tag:

html<input>

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

Задание 3

Bestudeer de hiërarchie van klassen voor deze collectie:

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

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

Задание 4

Bestudeer de hiërarchie van klassen voor deze collectie:

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

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

console.dir(elems);