Classi DOM integrate JavaScript

Gli elementi DOM rappresentano anch'essi oggetti di classi integrate. Diamo un'occhiata con un esempio. Supponiamo di avere un paragrafo:

<p>testo</p>

Otteniamo un riferimento ad esso in una variabile:

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

Stampiamo questo paragrafo in console:

console.log(elem);

E ora diamo un'occhiata all'elenco delle proprietà e metodi del nostro paragrafo:

console.dir(elem);

È possibile determinare a quale classe appartiene il nostro paragrafo. Per fare questo nella lista delle proprietà bisogna trovare una speciale proprietà [[Prototype]]. In essa noi vediamo che il paragrafo appartiene alla classe HTMLParagraphElement. Verifichiamolo:

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

Studiate il risultato dell'esecuzione del seguente codice:

<div>testo</div>

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

Determinate a quale classe appartiene questo tag.

Studiate il risultato dell'esecuzione del seguente codice:

<input>

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

Determinate a quale classe appartiene questo tag.

Studiate il risultato dell'esecuzione del seguente codice:

<div>testo</div>
<div>testo</div>
<div>testo</div>

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

Determinate a quale classe appartiene il risultato.

Studiate il risultato dell'esecuzione del seguente codice:

<div>
	<p>testo</p>
	<p>testo</p>
	<p>testo</p>
</div>

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

console.dir(elems);

Determinate a quale classe appartiene il risultato.