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:

html<p>szöveg</p>

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

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

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

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

Задание 1

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

html<div>szöveg</div>

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

Задание 2

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

html<input>

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

Задание 3

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

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

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

Задание 4

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

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

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

console.dir(elems);