JavaScript e o DOM | Tutorial JavaScript W3Docs

Informação

Temos uma seção completa e separada sobre o JavaScript DOM. Você pode explorá-la para exemplos e explicações detalhadas.

Introdução ao JavaScript e ao DOM

JavaScript é a linguagem de script que dá vida às páginas web. O Document Object Model (DOM) é a ponte que permite isso: quando um navegador carrega um documento HTML, ele analisa a marcação em uma árvore de objetos viva e em memória. O JavaScript lê e escreve nessa árvore, e o navegador repinta a página instantaneamente para refletir as mudanças. É assim que um documento estático se torna interativo — botões respondem, conteúdo é atualizado e estilos mudam sem recarregar a página.

Esta página cobre o essencial: como o DOM é estruturado, como selecionar elementos, como alterar seu conteúdo e estilos, e como responder a eventos do usuário. Cada tópico possui um link para um capítulo mais detalhado quando você quiser aprofundar.

Entendendo o DOM

O DOM é uma representação estruturada e em forma de árvore do seu documento HTML. Cada tag, atributo e trecho de texto se torna um nó — um objeto que o JavaScript pode ler e modificar. Como a árvore é viva, alterar um nó muda imediatamente o que o usuário vê.

É útil distinguir três termos que são facilmente confundidos:

DOM — o modelo de objeto que o navegador constrói a partir do seu HTML. Não é o código-fonte HTML; é a versão analisada e normalizada pelo navegador.
document — o objeto global que serve como ponto de entrada para a árvore DOM. Toda seleção começa aqui (ou a partir de outro elemento).
Node — um único ponto na árvore. Elementos (<div>, <p>), texto e comentários são todos nós; os nós de elemento são os com que você geralmente trabalha.

Para um tratamento mais completo dos tipos de nó e da estrutura da árvore, veja Understanding the DOM nodes e Traversing the DOM.

Navegando pela Árvore DOM

O JavaScript fornece vários métodos para encontrar elementos na árvore e poder agir sobre eles.

A árvore abaixo tem uma raiz document, um elemento <html> com filhos <head> e <body>, e nós de texto dentro dos cabeçalhos e parágrafos:

<!DOCTYPE html>
<html>
  <head>
    <title>Text</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>

Experimente Você Mesmo »

Métodos principais de seleção

document.getElementById() — retorna o único elemento com aquele id, ou null se não existir.
document.getElementsByClassName() — retorna uma HTMLCollection viva de elementos com a classe.
document.getElementsByTagName() — retorna uma HTMLCollection viva de elementos com a tag.
document.querySelector() — retorna o primeiro elemento que corresponde a qualquer seletor CSS, ou null.
document.querySelectorAll() — retorna uma NodeList estática de todos os elementos correspondentes.

Qual devo usar? No código moderno, querySelector e querySelectorAll cobrem quase todos os casos porque aceitam a sintaxe completa de seletores CSS (#id, .class, div > p, [type="text"]). Use getElementById apenas quando quiser a busca mais rápida possível por um id conhecido.

Duas distinções importam na prática:

Viva vs. estática. Uma HTMLCollection viva (de getElementsBy*) se atualiza automaticamente conforme o DOM muda; uma NodeList estática (de querySelectorAll) é um instantâneo tirado no momento da chamada.
Iteração. Uma NodeList suporta forEach diretamente; uma HTMLCollection não, então converta-a primeiro com Array.from(collection).

Para mais detalhes, veja Selecting DOM elements.

Manipulando Elementos DOM

Depois de ter uma referência a um elemento, você pode alterar seu conteúdo, atributos e aparência — e a página é atualizada instantaneamente.

Operações comuns

Alterando Conteúdo: Use element.innerHTML ou element.textContent.
Modificando Estilos: Acesse a propriedade element.style.
Criando Elementos: Use document.createElement().
Adicionando Elementos: Use parentElement.appendChild(newElement).
Removendo Elementos: Use parentElement.removeChild(existingElement).

Aviso

innerHTML analisa sua string como HTML, portanto inserir entradas não confiáveis abre uma vulnerabilidade XSS. Use textContent sempre que estiver inserindo texto simples — é mais seguro e mais rápido.

Veja DOM manipulation e Working with styles in the DOM para uma cobertura mais aprofundada.

Tratamento de Eventos em JavaScript

Um evento é algo que acontece na página — um clique, um pressionamento de tecla, um envio de formulário, o carregamento completo da página. O JavaScript pode registrar um listener que executa uma função sempre que um determinado evento ocorre em um determinado elemento.

Sintaxe do listener de eventos

element.addEventListener('event', functionToCall);

O primeiro argumento é o nome do evento (sem o prefixo on — é 'click', não 'onclick'). O segundo é o handler, a função que o navegador chama quando o evento ocorre.

Eventos principais

Eventos de Clique: Disparados por cliques do usuário.
Eventos de Carregamento: Acionados quando os recursos são carregados.
Eventos de Input: Ocorrem quando os usuários interagem com campos de entrada.

Exemplo de tratamento de eventos

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', function() {
            alert('Button Clicked!');
        });
    </script>
</body>
</html>

Experimente Você Mesmo »

Para uma visão mais ampla do modelo de eventos — propagação, o objeto de evento e remoção de listeners — leia Introduction to browser events e Event handling in the DOM.

Manipulações Avançadas do DOM

Além de edições básicas, o JavaScript suporta operações mais complexas como clonagem de nós, manipulação de formulários e alternância de classes CSS.

Técnicas

Clonagem de nós — element.cloneNode(true) copia um elemento e seus descendentes (false copia apenas o elemento em si).
Manipulação de formulários — leia input.value, reaja ao submit e valide antes de enviar.
Manipulando classes CSS — element.classList.add(), .remove() e .toggle() são mais limpos do que sobrescrever className.

A API classList é a forma idiomática de ativar e desativar estilos. Este trecho executável mostra a lógica que toggle segue:

// classList.toggle removes a class if present, adds it if absent.
// Here we model that behaviour with a plain Set to show the result.
const classes = new Set(['box']);

function toggle(name) {
  if (classes.has(name)) {
    classes.delete(name);
  } else {
    classes.add(name);
  }
  return classes.has(name);
}

console.log(toggle('active')); // true  (added)
console.log(toggle('active')); // false (removed)
console.log([...classes]);     // [ 'box' ]

JavaScript e DOM: Boas Práticas

Para usar o DOM de forma eficiente, tenha em mente:

Minimize o acesso ao DOM. Ler e escrever no DOM é muito mais lento do que trabalhar com valores JavaScript. Armazene referências em cache e agrupe suas alterações em vez de acessar o DOM em um laço apertado.
Use delegação de eventos. Em vez de um listener por filho, anexe um único listener ao pai e inspecione event.target. Isso trata filhos adicionados dinamicamente gratuitamente e usa menos memória.
Entenda reflow e repaint. Um reflow recalcula o layout; um repaint redesenha os pixels. Ambos são custosos, então agrupe escritas de estilo e prefira DocumentFragment para inserções em massa. Veja DOM performance optimization.

Exemplo de delegação de eventos

Em vez de vincular um handler a cada <li>, vincule um à lista e leia qual item foi clicado:

document.getElementById('list').addEventListener('click', function (event) {
  // event.target is the actual element the user clicked.
  if (event.target.tagName === 'LI') {
    console.log('You clicked:', event.target.textContent);
  }
});

JavaScript e DOM: Exemplos de Código

Alterando conteúdo

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="content">Original Content</div>
    <script>
        document.getElementById('content').innerHTML = 'Updated Content';
    </script>
</body>
</html>

Experimente Você Mesmo »

Adicionando novos elementos

<!DOCTYPE html>
<html>
<head>
    <title>Add Elements</title>
</head>
<body>
    <div id="container"></div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'New Paragraph';
        document.getElementById('container').appendChild(newElement);
    </script>
</body>
</html>

Experimente Você Mesmo »

Lembre-se, dominar o JavaScript e o DOM é uma jornada contínua de aprendizado. Continue experimentando, construindo e aprimorando suas habilidades para se tornar um desenvolvedor JavaScript proficiente.

Prática

Qual é o papel do JavaScript com o Document Object Model (DOM)?

JavaScript é usado para aplicar estilos CSS ao DOM.JavaScript pode manipular o DOM para adicionar, alterar ou remover elementos e atributos HTML.JavaScript é usado para armazenar e recuperar dados no DOM.JavaScript pode alterar todos os elementos HTML da página por meio do DOM.JavaScript é usado para tratar eventos em elementos HTML.JavaScript não pode alterar o conteúdo de elementos HTML.