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:

html<p>texto</p>

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

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

Vamos exibir este parágrafo no console:

javascriptconsole.log(elem);

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

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

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

Задание 1

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

html<div>texto</div>

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

Determine a qual classe pertence esta tag.

Задание 2

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

html<input>

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

Determine a qual classe pertence esta tag.

Задание 3

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

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

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

Determine a qual classe pertence o resultado.

Задание 4

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

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

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

console.dir(elems);

Determine a qual classe pertence o resultado.