A JavaScript DOM beépített osztályai

A DOM elemek beépített osztályok objektumait képviselik. Nézzük meg egy példán keresztül. Tegyük fel, hogy van egy bekezdésünk:

html<p>szöveg</p>

Szerezzük meg a hivatkozást rá egy változóba:

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

Írjuk ki ezt a bekezdést a konzolra:

javascriptconsole.log(elem);

És most nézzük meg a bekezdésünk tulajdonságainak és metódusainak listáját:

javascriptconsole.dir(elem);

Meghatározhatjuk, hogy a bekezdésünk melyik osztályhoz tartozik. Ehhez a tulajdonságok listájában meg kell keresnünk egy speciális tulajdonságot [[Prototype]]. Ebben látjuk, hogy a bekezdés a HTMLParagraphElement osztályhoz tartozik. Ellenőrizzük ezt:

javascriptconsole.log(elem instanceof HTMLParagraphElement); // true

Задание 1

Tanulmányozza a következő kód végrehajtásának eredményét:

html<div>szöveg</div>

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

Határozza meg, hogy ez a tag melyik osztályhoz tartozik.

Задание 2

Tanulmányozza a következő kód végrehajtásának eredményét:

html<input>

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

Határozza meg, hogy ez a tag melyik osztályhoz tartozik.

Задание 3

Tanulmányozza a következő kód végrehajtásának eredményét:

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

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

Határozza meg, hogy az eredmény melyik osztályhoz tartozik.

Задание 4

Tanulmányozza a következő kód végrehajtásának eredményét:

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);

Határozza meg, hogy az eredmény melyik osztályhoz tartozik.