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

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

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

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

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

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

console.dir(elem);

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

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

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

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

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

<input>

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

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

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

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

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

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

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

console.dir(elems);