Objeto Document do JavaScript Explicado: Propriedades, Métodos do DOM e Exemplos Práticos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma linguagem de programação essencial para o desenvolvimento web. Entre suas funcionalidades principais, o objeto documento desempenha um papel central no controle e na manipulação da estrutura e do conteúdo de uma página web. Neste artigo, você aprenderá sobre o objeto documento do JavaScript de forma que usuários iniciantes a intermediários possam entender.

Para que serve o JavaScript?

JavaScript é uma linguagem de programação usada em conjunto com HTML e CSS, principalmente para criar comportamentos dinâmicos e interações do usuário em páginas web. Exemplos incluem validação de formulários, exibição de menus pop‑up e adição de efeitos de animação.

Em particular, o objeto documento fornece funcionalidades para acessar e editar elementos em uma página web usando JavaScript. Com esse objeto, você pode selecionar elementos HTML, adicionar novos elementos, definir eventos e realizar muitas outras operações.

Por que você precisa aprender o objeto documento?

O objeto documento funciona como parte do DOM (Document Object Model). O DOM é um modelo que representa a estrutura de um documento HTML ou XML de forma que pode ser manipulada programaticamente, e é essencial para o desenvolvimento web.

Ao compreender esse modelo e aprender a usar o objeto documento de forma eficaz, você pode lidar com situações como as seguintes:

• Atualizações dinâmicas da interface do usuário
• Validação de formulários em tempo real
• Carregamento e renderização assíncronos de dados (AJAX ou Fetch API)
• Implementação de janelas modais e menus pop‑up

O que você aprenderá neste artigo

Este artigo explica tudo, desde o básico até o uso mais avançado do objeto documento, de maneira organizada, usando exemplos práticos de código para mostrar como ele funciona. Após a leitura, você será capaz de entender o seguinte:

• A estrutura básica e a funcionalidade do objeto documento
• Como selecionar e manipular elementos HTML
• Como configurar ouvintes de eventos e exemplos de uso prático
• Avisos importantes e boas práticas

Iniciantes podem assimilar firmemente os fundamentos, enquanto usuários intermediários podem obter dicas para escrever código mais eficiente.

2. O que é o objeto JavaScript document?

Em JavaScript, o objeto document é uma das interfaces mais importantes para trabalhar com páginas web. Fornecido como parte do DOM (Document Object Model), ele permite que você manipule e modifique facilmente os elementos dentro de uma página web.

O papel do objeto document

O objeto document representa todo o documento HTML carregado pelo navegador. Isso permite que você controle a estrutura HTML, estilos e conteúdo de forma programática usando JavaScript.

Por exemplo, você pode fazer o seguinte:

• Selecionar e editar elementos HTML
• Criar e anexar novos elementos
• Alterar a cor de fundo da página ou o conteúdo de texto
• Detectar ações do usuário definindo ouvintes de eventos

Relação entre o DOM e o objeto document

O DOM (Document Object Model) representa um documento HTML ou XML como uma estrutura em árvore. No topo dessa árvore está o objeto document.

O diagrama abaixo mostra uma visão simples da relação entre o DOM e o objeto document.

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── div
│       ├── p
│       └── button

Dessa forma, o objeto document representa a página inteira como uma árvore e serve como ponto de partida para acessar cada elemento.

Uso básico do objeto document

Vamos ver alguns exemplos simples de uso do objeto document.

Exemplo 1: Obter o título da página

console.log(document.title); // Get the page title

Exemplo 2: Alterar a cor de fundo

document.body.style.backgroundColor = "lightblue";

Exemplo 3: Selecionar e editar um elemento

let heading = document.getElementById("main-title");
heading.textContent = "New Title";

Ao combinar essas operações, você pode criar páginas web interativas e dinâmicas.

Principais recursos do objeto document

1. Atualizações em tempo real – As alterações no documento são refletidas imediatamente.
2. Acesso a uma estrutura hierárquica – Você pode selecionar e modificar elementos de forma flexível percorrendo a árvore DOM.
3. Gerenciamento de eventos – Você pode adicionar listeners de eventos com base nas ações do usuário.

3. Principais Propriedades e Métodos do Objeto document

O objeto JavaScript document fornece muitas propriedades e métodos que suportam uma ampla gama de operações em páginas web. Nesta seção, apresentaremos as propriedades e métodos mais usados.

1. Propriedades mais usadas

Abaixo estão as propriedades mais usadas do objeto document e para que servem.

Essas propriedades ajudam a recuperar e atualizar informações sobre uma página web de forma simples.

2. Métodos mais usados

Em seguida, veja os métodos usados para manipular elementos e adicionar novos elementos.

3. Exemplos combinando propriedades e métodos

Vamos ver exemplos reais de uso.

Exemplo 1: Obter o valor de um formulário

let form = document.forms[0];
let input = form.elements["username"];
console.log(input.value);

Exemplo 2: Criar e anexar um novo elemento

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Exemplo 3: Adicionar um evento de clique

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

4. Resumo

O objeto document oferece um conjunto rico de propriedades e métodos úteis para manipular páginas web. Ao dominá‑los, você pode criar páginas mais interativas e funcionais.

4. Selecionando e Manipulando Elementos HTML (Com Exemplos de Código)

Usando o objeto document do JavaScript, você pode selecionar facilmente elementos HTML, editar seu conteúdo e alterar seus atributos. Nesta seção, explicaremos técnicas comuns de seleção e manipulação em detalhes, com exemplos de código.

1. Como Selecionar Elementos HTML

1-1. Selecionar por ID – getElementById()

Selecione elementos usando o atributo ID definido em um elemento HTML.

Exemplo: Alterar o texto de um elemento
HTML:

<h1 id="title">Original Title</h1>

JavaScript:

let title = document.getElementById("title");
title.textContent = "New Title"; // Change the text

Ponto chave

• Um ID deve ser único. Você não pode atribuir o mesmo ID a múltiplos elementos.

1-2. Selecionar por nome de classe – getElementsByClassName()

Selecione múltiplos elementos que compartilham o mesmo nome de classe.

Exemplo: Alterar a cor de fundo
HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "lightblue";
}

Ponto chave

• Você itera sobre os elementos como um array e os manipula um a um.

1-3. Selecionar por nome de tag – getElementsByTagName()

Selecione todos os elementos com o nome de tag especificado.

Exemplo: Alterar a cor de todos os parágrafos
HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript:

let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
    p.style.color = "green";
}

1-4. Selecionar com seletores CSS – querySelector() e querySelectorAll()

Usar seletores CSS permite selecionar elementos de forma mais flexível.

Selecionar um único elemento – querySelector()

let firstDiv = document.querySelector("div.box");
firstDiv.textContent = "Selected box";

Selecionar múltiplos elementos – querySelectorAll()

let allDivs = document.querySelectorAll("div.box");
allDivs.forEach(div => div.style.border = "1px solid red");

2. Como Manipular Elementos HTML

2-1. Editando texto ou HTML

Exemplo: Diferença entre innerHTML e textContent
HTML:

<div id="content">Original text</div>

JavaScript:

let content = document.getElementById("content");

// Change text only
content.textContent = "<b>New text</b>"; // Displayed as plain text

// Change including HTML
content.innerHTML = "<b>New text</b>"; // Displayed in bold

Pontos principais

• textContent trata as tags como uma string simples e não as interpreta como HTML.
• innerHTML aplica HTML diretamente, mas você deve ter cuidado com a segurança (prevenção de XSS).

2-2. Editando atributos

Exemplo: Alterar um link
HTML:

<a id="link" href="https://example.com">Original link</a>

JavaScript:

let link = document.getElementById("link");
link.setAttribute("href", "https://google.com"); // Change the URL
link.textContent = "Link to Google";             // Change the label

2-3. Criando e adicionando novos elementos

Exemplo: Adicionar um novo item de lista
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

2-4. Removendo elementos

Exemplo: Remover um elemento ao clicar em um botão
HTML:

<div id="box">Element to be removed</div>
<button id="deleteBtn">Remove</button>

JavaScript:

let box = document.getElementById("box");
let deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", () => {
    box.remove(); // Remove the element
});

3. Resumo

Nesta seção, você aprendeu como selecionar e manipular elementos HTML usando o objeto document por meio de exemplos práticos. Dominar essas técnicas torna o controle dinâmico de páginas web muito mais fácil.

5. Etapas para Criar e Adicionar Novos Elementos (Com Diagramas)

Usando o objeto document do JavaScript, você pode criar dinamicamente novos elementos HTML e adicioná-los a uma página existente. Nesta seção, explicamos as etapas específicas para criar e adicionar elementos com exemplos de código e diagramas.

1. Como criar novos elementos

1-1. Criar um elemento – createElement()

Crie um novo elemento HTML usando o método document.createElement().

Exemplo: Criar um novo elemento de parágrafo

let newParagraph = document.createElement("p"); // Create a new <p> element
newParagraph.textContent = "This paragraph was added dynamically."; // Set the text

Pontos principais

• O elemento criado ainda não foi adicionado ao DOM.
• Você pode definir livremente texto e atributos.

2. Definir atributos e estilos em um elemento

2-1. Definir atributos – setAttribute()

Para definir atributos em um elemento criado, use o método setAttribute().

Exemplo: Adicionar atributos a um elemento de link

let link = document.createElement("a");
link.textContent = "Google";
link.setAttribute("href", "https://google.com"); // Set the URL
link.setAttribute("target", "_blank");           // Open in a new tab

2-2. Definir estilos – a propriedade style

Se você quiser definir o design diretamente, use a propriedade style.

Exemplo: Estilizar um botão

let button = document.createElement("button");
button.textContent = "Click";
button.style.backgroundColor = "blue"; // Background color
button.style.color = "white";          // Text color
button.style.padding = "10px 20px";    // Padding

3. Adicionar o elemento à página

Você pode adicionar elementos criados ao DOM usando appendChild() ou insertBefore().

3-1. Adicionar ao final – appendChild()

Exemplo: Adicionar um item de lista
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

3-2. Anexar em uma posição específica – insertBefore()

Exemplo: Inserir um item em uma posição especificada

let referenceItem = list.firstElementChild; // Use the first item as a reference
list.insertBefore(newItem, referenceItem);  // Insert before the first item

4. Remover elementos

Você pode remover elementos criados usando removeChild() ou remove().

4-1. Remover um elemento filho – removeChild()

let itemToRemove = list.lastElementChild; // Get the last item
list.removeChild(itemToRemove);           // Remove it

4-2. Remover o elemento em si – remove()

newItem.remove(); // Remove itself

5. Exemplo prático: Criando dinamicamente um elemento de cartão

A seguir, um exemplo que cria dinamicamente um novo elemento “card”, define estilos e o anexa à página.

HTML:

<div id="container"></div>

JavaScript:

let container = document.getElementById("container");

// Create the card element
let card = document.createElement("div");
card.classList.add("card"); // Add a class

// Create the card title
let title = document.createElement("h2");
title.textContent = "Card Title";

// Create the card body text
let description = document.createElement("p");
description.textContent = "This is the description text for the card.";

// Assemble and append
card.appendChild(title);
card.appendChild(description);
container.appendChild(card); // Append to the page

// Styling
card.style.border = "1px solid #ccc";
card.style.padding = "10px";
card.style.margin = "10px";
card.style.width = "200px";
card.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

Resultado:

Card Title
This is the description text for the card.

6. Resumo

Nesta seção, você aprendeu o fluxo completo desde a criação de novos elementos até a definição de atributos e estilos, e anexá-los à página. Ao aplicar essas técnicas, gerar conteúdo web dinâmico se torna muito mais fácil.

6. Como Configurar Listeners de Eventos (Exemplos Práticos)

Em JavaScript, você pode usar o objeto document para configurar listeners de eventos e executar processamento dinâmico em resposta a ações do usuário. Nesta seção, explicamos desde os conceitos básicos de listeners de eventos até exemplos de uso prático.

1. O que é um listener de evento?

Um listener de evento é um mecanismo que detecta ações do usuário (como cliques, entrada ou movimento do mouse) e executa uma operação correspondente.

Exemplo: Evento de clique básico

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

2. Como adicionar listeners de eventos

2-1. Uso básico de addEventListener()

O método addEventListener() usa a seguinte sintaxe:

element.addEventListener(event, function, useCapture);

Descrição dos parâmetros

1. event – O tipo de evento (por exemplo: click , mouseover , keydown ).
2. function – A função a ser executada (anônima ou nomeada).
3. useCapture – Método de propagação de evento ( true para captura, false para bolha).

Exemplo: Adicionar um evento de mouseover

let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

3. Tipos de eventos comumente usados

A seguir, tipos de eventos comumente usados e exemplos.

4. Exemplos práticos de listeners de eventos

4-1. Alterar texto ao clicar em um botão

HTML:

<button id="changeText">Change</button>
<p id="text">Original text</p>

JavaScript:

let button = document.getElementById("changeText");
let text = document.getElementById("text");

button.addEventListener("click", () => {
    text.textContent = "Novo texto";
});

4-2. Real-time input detection

HTML:

<input type="text" id="nameInput" placeholder="Digite seu nome">
<p id="output"></p>

JavaScript:

let input = document.getElementById("nameInput");
let output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = "Entrada: " + input.value;
});

4-3. Change background color on hover

HTML:

<div id="hoverBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>

JavaScript:

let hoverBox = document.getElementById("hoverBox");

hoverBox.addEventListener("mouseover", () => {
    hoverBox.style.backgroundColor = "yellow";
});

hoverBox.addEventListener("mouseout", () => {
    hoverBox.style.backgroundColor = "lightgray";
});

5. How to remove event listeners

You can remove an event listener using the removeEventListener() method.

Example: Remove a click event

function handleClick() {
    alert("Clicado!");
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Remove the event listener
button.removeEventListener("click", handleClick);

Important note

• To remove an event listener, you must reference the same function. Anonymous functions cannot be removed.

6. Summary

In this section, you learned how to set up event listeners, common event types, and practical usage examples. Mastering event handling is essential for creating interactive web applications.

7. Common Practical Use Cases and Applied Scenarios

The JavaScript document object can be applied in many real-world scenarios. In this section, we introduce common use cases and applied scenarios frequently seen in actual development.

1. Dynamic form validation

Form input validation is important for improving user experience. Below is an example that checks input in real time.

HTML

<form id="signupForm">
  <label for="email">E-mail:</label>
  <input type="email" id="email" required>
  <span id="emailError" style="color: red;"></span>
  <br>
  <button type="submit">Enviar</button>
</form>

JavaScript

let emailInput = document.getElementById("email");
let emailError = document.getElementById("emailError");
let form = document.getElementById("signupForm");

// Input validation
emailInput.addEventListener("input", () => {
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "Por favor, insira um endereço de e‑mail válido.";
    } else {
        emailError.textContent = "";
    }
});

// Check on form submission
form.addEventListener("submit", (event) => {
    if (emailError.textContent !== "") {
        event.preventDefault();
        alert("Há um erro na sua entrada.");
    }
});

2. Dynamic content generation

This example dynamically generates new elements based on user actions.

HTML

<div id="container"></div>
<button id="addItem">Adicionar item</button>

JavaScript

let container = document.getElementById("container");
let addButton = document.getElementById("addItem");

addButton.addEventListener("click", () => {
    let newItem = document.createElement("div");
    newItem.textContent = "Novo item";
    newItem.style.border = "1px solid #ccc";
    newItem.style.padding = "10px";
    newItem.style.margin = "5px 0";
    container.appendChild(newItem);
});

Result: A new item is added each time the button is clicked.

8. Cautions and Best Practices

The JavaScript document object is very powerful, but improper usage can negatively impact performance and security. In this section, we introduce important cautions and best practices to keep your code safe and efficient.

1. Performance optimization

1-1. Minimize DOM operations

Operações de DOM são custosas, portanto você deve reduzir o número de vezes que são realizadas.

Bad example (repeated DOM operations inside a loop)

for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    document.body.appendChild(div);
}

Improved example (using a Document Fragment)

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Key point

• Fragmentos podem ser adicionados ao DOM em uma única operação, melhorando o desempenho.

1-2. Reduce reflow and repaint

Alterar estilos com frequência causa reflow e repaint, o que pode desacelerar a renderização.

Bad example

let box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";

Improved example (batch updates)

let box = document.getElementById("box");
Object.assign(box.style, {
    width: "100px",
    height: "100px",
    backgroundColor: "red"
});

2. Security considerations

2-1. Preventing XSS attacks

Usar innerHTML pode permitir a injeção de scripts maliciosos.

Dangerous example

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").innerHTML = userInput;

Safe example

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").textContent = userInput;

Key point

• Sempre saneie a entrada do usuário antes de exibi-la.

2-2. Proper management of event listeners

Se listeners de eventos não utilizados não forem removidos, podem causar vazamentos de memória.

Bad example

document.getElementById("button").addEventListener("click", () => {
    alert("Clicked!");
});

Improved example (remove the listener when no longer needed)

function handleClick() {
    alert("Clicked!");
}
let button = document.getElementById("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

3. Readability and maintainability

3-1. Consistent naming conventions

Use nomes de variáveis e funções descritivos que indiquem claramente seus papéis.

Bad example

let a = document.getElementById("username");
let b = document.getElementById("password");

Improved example

let usernameInput = document.getElementById("username");
let passwordInput = document.getElementById("password");

3-2. Creating reusable functions

Ao refatorar o código em funções, você reduz a duplicação e melhora a manutenibilidade.

Bad example

document.getElementById("btn1").addEventListener("click", () => alert("Button 1"));
document.getElementById("btn2").addEventListener("click", () => alert("Button 2"));

Improved example

function handleClick(message) {
    alert(message);
}

document.getElementById("btn1").addEventListener("click", () => handleClick("Button 1"));
document.getElementById("btn2").addEventListener("click", () => handleClick("Button 2"));

4. Mobile and responsive considerations

Ao usar JavaScript, garanta um comportamento suave também em dispositivos móveis.

Tips and countermeasures

1. Alternative to click events – Em dispositivos móveis, considere touchstart ou touchend.
2. Viewport settings – Configure corretamente o viewport para evitar zoom indesejado.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Combine with media queries – Use media queries CSS para layouts responsivos.

5. Summary

Esta seção abordou precauções importantes e boas práticas para usar o objeto document de forma segura e eficiente.

• Otimização de desempenho : Minimize as operações de DOM.
• Segurança : Previna XSS e trate a entrada do usuário com segurança.
• Manutenibilidade : Escreva código legível e reutilizável.
• Suporte móvel : Considere design responsivo e eventos de toque.

9. FAQ: Perguntas Comuns para Iniciantes

Iniciantes que começam a usar o objeto JavaScript document frequentemente encontram várias dúvidas e problemas. Esta seção responde às perguntas comuns em formato de Q&A.

Q1. Por que não consigo selecionar um elemento usando getElementById()?

R:
Razões comuns incluem as seguintes:

1. ID incorreto

• O ID especificado não existe ou está escrito incorretamente.
• Solução : Verifique se o ID no seu HTML corresponde ao usado no seu JavaScript.

2. Tempo de execução do script

• Se o JavaScript for executado antes do HTML ser carregado, o elemento ainda não existe.
• Solução : Use o evento DOMContentLoaded.

  document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("myDiv");
      console.log(element.textContent);
  });
  

Q2. Qual é a diferença entre innerHTML e textContent?

R:

• innerHTML : Obtém ou define todo o conteúdo, incluindo tags HTML.
• textContent : Obtém ou define apenas o conteúdo de texto (tags HTML são ignoradas).

Q3. Por que não consigo modificar elementos retornados por querySelectorAll()?

R:
querySelectorAll() retorna um NodeList estático, que não é um array. Você deve percorrê-lo para aplicar alterações.

let items = document.querySelectorAll(".item");
items.forEach(item => {
    item.style.color = "blue";
});

Q4. Por que addEventListener() não funciona?

R:
Possíveis razões incluem:

1. Elemento não encontrado

• O elemento alvo não foi selecionado corretamente.
• Solução : Verifique no console se o elemento existe.

Q5. Por que removeChild() gera um erro?

R:
O elemento a ser removido deve ser um filho do elemento pai.

let list = document.getElementById("list");
let item = document.getElementById("item1");
list.removeChild(item);

6. Resumo

Esta seção de FAQ abordou problemas comuns de iniciantes. Prestar atenção à seleção de elementos, ao timing e ao uso correto dos métodos ajudará a evitar muitos problemas.

10. Conclusão e Próximos Passos

Ao longo deste artigo, você aprendeu sobre o objeto JavaScript document, desde conceitos básicos até aplicações práticas. Vamos revisar os pontos principais e observar os próximos passos para aprofundar o aprendizado.

Ao dominar o objeto document, você obtém a base necessária para construir aplicações web dinâmicas, interativas e eficientes. Como próximo passo, explore manipulação avançada do DOM, integração de APIs e frameworks modernos para aprimorar ainda mais suas habilidades.