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:

<p>szöveg</p>

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

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

Írjuk ki ezt a bekezdést a konzolra:

console.log(elem);

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

console.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:

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

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

<div>szöveg</div>

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

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

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

<input>

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

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

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

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

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

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

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

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

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