JavaScript-те ОЖЖ-дағы кіріктірілген кластар иерархиясы

Кіріктірілген кластардың да иерархиясы бар. Мысал ретінде абзацқа қарайық:

html<p>мәтін</p>

Абзацқа сілтемені айнымалыға алайық:

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

Абзацымызды консольде көрейік:

javascriptconsole.dir(elem);

Өздеріңіз білетіндей, [[Prototype]] қасиетінде абзац класының аты бар. Бұл HTMLParagraphElement. Егер бұл кластың қасиеттері мен әдістерінің тізімін жазып шықсақ, онда төменнен тағы да [[Prototype]] қасиеті табылады, ол енді аталық класты қамтиды және бұл HTMLElement болады. Ол үшін де атасын табуға болады және тағы да солай.

Задание 1

Мына тег үшін кластар иерархиясын зерттеңіз:

html<div>мәтін</div>

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

Задание 2

Мына тег үшін кластар иерархиясын зерттеңіз:

html<input>

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

Задание 3

Мына жиын үшін кластар иерархиясын зерттеңіз:

html<div>мәтін</div>
<div>мәтін</div>
<div>мәтін</div>

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

Задание 4

Мына жиын үшін кластар иерархиясын зерттеңіз:

html<div>
  <p>мәтін</p>
  <p>мәтін</p>
  <p>мәтін</p>
</div>

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

console.dir(elems);