A beépített osztályok hierarchiája az OOP-ben JavaScriptben

A beépített osztályoknak is van hierarchiájuk. Nézzük meg ezt egy bekezdés példáján:

<p>szöveg</p>

Kapjuk meg a bekezdésre mutató hivatkozást egy változóba:

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

Nézzük meg a bekezdésünket a konzolban:

console.dir(elem);

Ahogy már tudod, a [[Prototype]] tulajdonság tartalmazza a bekezdés osztályának nevét. Ez HTMLParagraphElement. Ha kibontjuk ezen osztály tulajdonságainak és metódusainak listáját, akkor alul ismét találunk egy [[Prototype]] tulajdonságot, amely már a szülőosztályt fogja tartalmazni, és ez a HTMLElement lesz. Ennek is megkereshetjük a szülőjét, és így tovább.

Tanulmányozza az osztályok hierarchiáját ehhez a címkéhez:

<div>szöveg</div>

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

Tanulmányozza az osztályok hierarchiáját ehhez a címkéhez:

<input>

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

Tanulmányozza az osztályok hierarchiáját ehhez a gyűjteményhez:

<div>szöveg</div>
<div>szöveg</div>
<div>szöveg</div>

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

Tanulmányozza az osztályok hierarchiáját ehhez a gyűjteményhez:

<div>
	<p>szöveg</p>
	<p>szöveg</p>
	<p>szöveg</p>
</div>

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

console.dir(elems);