Classes DOM Integradas em JavaScript

Os elementos DOM também representam objetos de classes integradas. Vamos ver um exemplo. Suponha que temos um parágrafo:

<p>texto</p>

Vamos obter uma referência para ele em uma variável:

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

Vamos exibir este parágrafo no console:

console.log(elem);

E agora vamos olhar a lista de propriedades e métodos do nosso parágrafo:

console.dir(elem);

Podemos determinar a qual classe o nosso parágrafo pertence. Para isso, na lista de propriedades, precisamos encontrar uma propriedade especial [[Prototype]]. Nela, nós vemos que o parágrafo pertence à classe HTMLParagraphElement. Vamos verificar isso:

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

Estude o resultado da execução do seguinte código:

<div>texto</div>

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

Determine a qual classe pertence esta tag.

Estude o resultado da execução do seguinte código:

<input>

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

Determine a qual classe pertence esta tag.

Estude o resultado da execução do seguinte código:

<div>texto</div>
<div>texto</div>
<div>texto</div>

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

Determine a qual classe pertence o resultado.

Estude o resultado da execução do seguinte código:

<div>
	<p>texto</p>
	<p>texto</p>
	<p>texto</p>
</div>

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

console.dir(elems);

Determine a qual classe pertence o resultado.