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

Suggested prompts:

Can you explain more about how to access different types of DOM nodes?

What are some common methods for modifying the DOM with JavaScript?

Can you give more examples of how JavaScript can change the structure of a webpage?

Deslize para mostrar o menu