JavaScriptin sisäänrakennetut DOM-luokat

DOM-elementit edustavat myös sisäänrakennettujen luokkien olioita. Katsotaanpa esimerkkiä. Oletetaan, että meillä on kappale:

<p>teksti</p>

Saadaan viittaus siihen muuttujaan:

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

Tulostetaan tämä kappale konsoliin:

console.log(elem);

Katsotaanpa nyt luettelo kappaleemme ominaisuuksista ja menetelmistä:

console.dir(elem);

Voidaan määrittää mihin luokkaan kappaleemme kuuluu. Tätä varten ominaisuuksien luettelosta on löydettävä erityinen ominaisuus [[Prototype]]. Siinä me näemme, että kappale kuuluu luokkaan HTMLParagraphElement. Tarkistetaan tämä:

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

Tutki seuraavan koodin suorituksen tulosta:

<div>teksti</div>

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

Määritä, mihin luokkaan tämä tagi kuuluu.

Tutki seuraavan koodin suorituksen tulosta:

<input>

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

Määritä, mihin luokkaan tämä tagi kuuluu.

Tutki seuraavan koodin suorituksen tulosta:

<div>teksti</div>
<div>teksti</div>
<div>teksti</div>

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

Määritä, mihin luokkaan tulos kuuluu.

Tutki seuraavan koodin suorituksen tulosta:

<div>
	<p>teksti</p>
	<p>teksti</p>
	<p>teksti</p>
</div>

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

console.dir(elems);

Määritä, mihin luokkaan tulos kuuluu.