Aprenda O Que É o Modelo de Objeto de Documento (DOM)? | Manipulação do DOM para Desenvolvimento Web Interativo

Agora que abordamos as classes em JavaScript, vamos direcionar nosso foco para o Document Object Model (DOM), que é a interface que nos permite manipular páginas web. A próxima seção irá explorar como o JavaScript interage com o DOM para criar conteúdos dinâmicos e interativos.

Pense no DOM como uma árvore genealógica. Cada elemento no documento é como um membro da família, conectado por relações — pais, filhos e irmãos.

No DOM, elementos, atributos e textos são chamados de nós, e esses nós são organizados hierarquicamente, assim como membros de uma família em uma árvore genealógica. Alguns nós são pais com filhos, enquanto outros são irmãos.

A Relação Entre HTML e o DOM

Quando um navegador carrega um documento HTML, ele lê o código HTML e constrói uma árvore DOM correspondente. O HTML fornece a estrutura estática da página web, enquanto o DOM é a representação dinâmica e viva que pode ser manipulada pelo JavaScript.

O HTML define a estrutura inicial da árvore genealógica de quem está conectado a quem, mas é estático e não muda sozinho;
O DOM é a árvore genealógica em tempo real, e pode ser alterado. Novos membros (elementos) podem ser adicionados ou removidos, e as relações (pai-filho, irmãos) podem ser atualizadas pelo JavaScript.

Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Este HTML cria uma árvore genealógica básica com um nó <html> como pai, e os nós <head> e <body> como seus filhos. Dentro do body, <h1> e <p> são irmãos.

Essa estrutura é a versão viva e interativa do HTML no DOM, onde o JavaScript pode manipular os relacionamentos entre os nós (membros da família).

Como o JavaScript Interage com o DOM

O JavaScript pode acessar e manipular o DOM para fazer alterações na árvore genealógica em tempo real. É possível adicionar novos membros, remover existentes ou alterar suas informações.

Acessando Membros da Família: Assim como é possível encontrar uma pessoa específica em uma árvore genealógica, o JavaScript pode acessar nós individuais no DOM usando métodos como document.getElementById() ou document.querySelector();
Alterando Informações: Depois de acessar um membro da família, seus detalhes podem ser atualizados. Por exemplo, o JavaScript pode alterar o conteúdo de texto ou atributos de um elemento usando propriedades como innerHTML ou textContent;
Modificando Relacionamentos: O JavaScript também pode adicionar novos membros à árvore ou removê-los. Isso é feito manipulando a estrutura do DOM com métodos como appendChild() ou removeChild().

Exemplo

Considere este HTML:

<p id="greeting">Hello, World!</p>

Usando JavaScript, é possível alterar o texto do parágrafo, assim como atualizar o nome de um membro da família:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Após executar o código JavaScript, a árvore genealógica (DOM) é atualizada e o texto do parágrafo muda de "Hello, World!" para "Hello, JavaScript!"

index.html

index.js

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.22

Deslize para mostrar o menu