Dom e JavaScript: Guia para manipulação de elementos

Quando abrimos uma página web em nosso navegador, todo o conteúdo HTMLO que é HTML? Fundamentos, História e Evolução da LinguagemDescubra a origem e evolução do HTML, entendendo sua importância na estrutura da web e como influenciou o desenvolvimento digital moderno. é interpretado e organizado em uma estrutura conhecida como DOM (Document ObjectVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. Model). O DOM transforma cada parte do documento - como textos, imagens, listas e botões - em objetos que podemos manipular com JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Entender como o DOM funciona é fundamental para criar interações e dinamismo em nossas páginas.

Neste tutorial, vamos explorar:

O que é o DOM e sua representação em forma de árvore.
Como selecionar elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. usando diferentes métodos.
A diferença entre coleções retornadas (HTMLCollection vs. NodeList).

Este conhecimento é essencial para controlar e modificar qualquer elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. da página. Vamos começar!

O que é o DOM?🔗

O DOM (Document ObjectVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. Model) pode ser imaginado como uma árvore hierárquica que mapeia todos os elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. e nós de um documento HTML. Cada elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. (tagsTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. como <div>, <h1>, <p>, etc.), cada atributo e cada texto do HTML tornam-se nós dessa árvore. A partir do momento em que o navegador carrega o documento, você pode usar JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. para:

Acessar esses nós.
Ler e modificar atributos e propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters..
Criar ou remover elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. da página.

A principal vantagem de ter um modelo de objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. para o documento é a facilidade de interação: podemos comprar, adicionar, alterar e remover partes do conteúdo em tempo real, oferecendo maior dinâmica à aplicação web.

Entendendo a Estrutura do DOM em Forma de Árvore🔗

Podemos visualizar a estrutura de um documento HTMLO que é HTML? Fundamentos, História e Evolução da LinguagemDescubra a origem e evolução do HTML, entendendo sua importância na estrutura da web e como influenciou o desenvolvimento digital moderno. como uma árvore onde existe um nó raiz chamado document, que representa todo o arquivo. Abaixo dele, encontramos o <html>, e dentro dele, <head> e <body>, e assim por diante:

flowchart TB A[document] --> B[html] B --> C[head] B --> D[body] D --> E[header] D --> F[main] D --> G[footer]

No diagrama acima, cada retângulo representa um nó do DOM. Para fins de ilustração, usamos algumas tagsTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. de exemplo: header, main e footer. Na prática, essa árvore pode ser bem extensa, dependendo do tamanho e complexidade do documento.

Selecionando Elementos🔗

Para realizar qualquer ação nos elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. da página, primeiro precisamos selecioná-los. É possível identificar cada pedaço do DOM usando métodos específicos disponibilizados por JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Entre os mais comuns, estão:

document.getElementById(idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência.)
document.getElementsByClassName(className)
document.getElementsByTagName(tagName)
document.querySelector(seletorCSS)
document.querySelectorAll(seletorCSS)

A seguir, veremos como cada um deles funciona.

Exemplo de Estrutura HTML

Vamos usar um código HTML de exemplo para ilustrar a seleção de elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis.:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Exemplo de DOM</title>
</head>
<body>
  <h1 id="titulo-principal">Meu Título</h1>
  <p class="texto">Olá! Este é um parágrafo de texto.</p>
  <p class="texto">Este é outro parágrafo com a mesma classe.</p>
  <button id="botao-clique">Clique aqui</button>
</body>
</html>

Suponha que esse código esteja salvo no arquivo index.html. Agora, vamos explorar alguns métodos de seleção em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. para chamar esses elementos pelo seu idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência., classeAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência. e seletor CSSO que é CSS?Descubra como o CSS transforma a aparência das páginas web, separando conteúdo de design para melhor organização e flexibilidade..

Métodos de Seleção🔗

document.getElementById(id)

Seleciona um elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pelo seu atributo idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência..

const titulo = document.getElementById("titulo-principal");
console.log(titulo); // <h1 id="titulo-principal">Meu Título</h1>

Retorna sempre um único elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. ou nullVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação. se o idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência. não existir no documento.

document.getElementsByClassName(className)

Seleciona todos os elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. que possuam a classe informada.

const paragrafos = document.getElementsByClassName("texto");
console.log(paragrafos);
// HTMLCollection [ <p class="texto">, <p class="texto">, ... ]

Retorna um HTMLCollection, que é atualizado dinamicamente quando algo muda na página.
Pode ser percorrido com loopsEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação., como forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação. ou usando ArrayFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web..from(paragrafos) para transformar em arrayFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web..

document.getElementsByTagName(tagName)

const todosParagrafos = document.getElementsByTagName("p");
console.log(todosParagrafos);
// HTMLCollection [ <p class="texto">, <p class="texto">, ... ]

Similar a getElementsByClassName, mas aqui é baseado na tagTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis., como p, divDivs e Spans: Uso e DiferençasAprenda a usar divs e spans para estruturar páginas HTML. Descubra técnicas essenciais e dicas de boas práticas para criar layouts organizados., button, etc.

document.querySelector(seletorCSS)

Retorna o primeiro elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. que corresponde ao seletor CSS fornecido.

const primeiroParagrafo = document.querySelector("p.texto");
console.log(primeiroParagrafo);
// <p class="texto">Olá! Este é um parágrafo de texto.</p>

Podemos usar qualquer seletor suportado pelo CSSO que é CSS?Descubra como o CSS transforma a aparência das páginas web, separando conteúdo de design para melhor organização e flexibilidade., como #botao-cliqueEventos no JavaScript: onClick, onChange e maisDescubra como os eventos em JavaScript, como onClick e onChange, possibilitam interações dinâmicas e melhoram a experiência do usuário em páginas web., .texto, divDivs e Spans: Uso e DiferençasAprenda a usar divs e spans para estruturar páginas HTML. Descubra técnicas essenciais e dicas de boas práticas para criar layouts organizados. ul li, etc. É uma forma mais versátil, pois permite buscas mais detalhadas.

document.querySelectorAll(seletorCSS)

Retorna todos os elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. que correspondem ao seletor CSS fornecido.

const listaParagrafos = document.querySelectorAll("p.texto");
console.log(listaParagrafos);
// NodeList [ <p class="texto">, <p class="texto"> ]

Retorna um NodeList, que não é atualizado automaticamente quando há mudançasEventos no JavaScript: onClick, onChange e maisDescubra como os eventos em JavaScript, como onClick e onChange, possibilitam interações dinâmicas e melhoram a experiência do usuário em páginas web. na página, mas ainda permite métodos como forEach.

Principais Diferenças Entre HTMLCollection e NodeList🔗

É comum ficar em dúvida sobre os dois tipos de coleções mais comuns retornadas pelos métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. de seleção:

Coleção	Método(s) que Retorna	Características
HTMLCollection	- getElementsByClassName() - getElementsByTagName()	Atualizado dinamicamente ao vivo. Só pode ser percorrido com estruturas de loop tradicionais ou convertido em array.
NodeList	- querySelectorAll()	Não sofre atualização automática após mudanças no DOM. Permite uso de forEach e outras construções modernas.