Atividade:

Introdução ao DOM (JavaScript)

Objetivo: Compreender o que é o DOM e como o JavaScript interage com elementos HTML.

Pesquisa

1. O que é DOM? Explique com suas palavras e a relação com HTML.

O DOM (Document Object Model) é uma interface de programação que representa o HTML de uma página web como uma árvore de objetos, permitindo que o JavaScript acesse, altere, adicione ou remova elementos, estilos e conteúdo de forma dinâmica. Ele transforma o código estrutural em uma estrutura hierárquica (nós) manipulável pelo navegador.

2. O que é um nó (node)? Explique elementos, atributos e textos.

No "mapa" do DOM, tudo é um nó. É a unidade básica da árvore. Pense neles como categorias diferentes de peças:

  • - Elementos (Element Node): São as tags HTML propriamente ditas (div, h1, p). São os ramos principais da árvore.
  • - Atributos (Attribute Node): São as informações extras dentro da tag, como o src de uma imagem ou a class de um botão.
  • - Textos (Text Node): É o conteúdo escrito que fica dentro das tags. Sim, o texto "Olá Mundo" é considerado um nó filho da tag onde ele está.

    • 3. Explique os métodos: getElementById(), querySelector(), querySelectorAll().

    Para mexer no DOM, primeiro você precisa "agarrar" o elemento. Os métodos mais comuns são:

  • - getElementById('id'): É o mais rápido e direto. Ele busca o elemento pelo ID único. Como IDs não se repetem, ele retorna apenas um elemento.
  • - querySelector('.classe' ou '#id'): É o canivete suíço. Ele usa a mesma sintaxe do CSS. Ele retorna o primeiro elemento que encontrar que corresponda ao que você pediu.
  • - querySelectorAll('.classe'): Diferente do anterior, ele busca todos os elementos que batem com a descrição e te entrega uma lista (NodeList) para você percorrer.

    • 4. Diferença entre innerHTML e innerText.

    A principal diferença é que o innerHTML processa e renderiza tags HTML, permitindo alterar a estrutura do DOM, enquanto o innerText manipula apenas texto, exibindo tags como texto puro. O innerHTML retorna o conteúdo com formatação, já o innerText retorna apenas o texto visível e ciente do CSS.

    5. O que são eventos? Exemplos: onclick, onchange, onmouseover.

    Eventos são ações ou ocorrências detectadas pelo JavaScript que acontecem nos elementos de uma página web, geralmente disparados por interações do usuário (clique, teclado, movimento do mouse) ou pelo navegador (carregamento da página). Eles permitem tornar sites interativos, executando funções específicas em resposta, como validação de formulários ou alterações visuais.