S08L01 - O Objeto DOM

html

Compreendendo o DOM: Um Guia Abrangente para Iniciantes e Desenvolvedores
Índice

Introdução ao DOM ...................1
Estrutura do DOM .......................3
Navegando na Árvore DOM .................6
Modificando o DOM com JavaScript .......9
Métodos e Propriedades do DOM ..........12
Exemplos Práticos ...........................15
Conclusão .............................................18


Introdução ao DOM
Bem-vindo a este guia abrangente sobre o Document Object Model (DOM). Seja você um iniciante entrando no mundo do desenvolvimento web ou um desenvolvedor experiente buscando aprimorar seus conhecimentos, compreender o DOM é crucial para criar páginas web dinâmicas e interativas.
O que é o DOM?
O DOM é uma representação de objeto dos seus documentos HTML ou XML, servindo como uma ponte entre as páginas web e linguagens de programação como JavaScript. Ele organiza uma página web em uma estrutura de árvore hierárquica, permitindo que desenvolvedores naveguem, modifiquem e manipulem o conteúdo dinamicamente.
Importância do DOM

Interatividade: Melhora a experiência do usuário ao permitir atualizações de conteúdo dinâmicas sem recarregar a página.
Flexibilidade: Permite mudanças em tempo real na estrutura, estilo e conteúdo da página web.
Integração: Serve como a espinha dorsal para o JavaScript interagir e modificar páginas web.

Prós e Contras de Usar o DOM


Prós
Contras


Facilita a manipulação de conteúdo dinâmico
Pode levar a problemas de performance se mal utilizado


Melhora a interação do usuário
A complexidade aumenta com documentos maiores


Permite atualizações em tempo real sem recargas
Requer entendimento de estruturas de árvore


Quando e Onde Usar o DOM

Aplicações Web Dinâmicas: Ao construir funcionalidades interativas como formulários, jogos ou painéis.
Atualizações de Conteúdo em Tempo Real: Para aplicações que requerem atualizações de dados ao vivo, como aplicações de chat ou feeds ao vivo.
Manipulação de Conteúdo da Página Web: Quando você precisa adicionar, remover ou modificar elementos em tempo real com base em ações ou eventos do usuário.


Estrutura do DOM
Compreender a estrutura do DOM é fundamental para manipular páginas web de forma eficaz. O DOM representa o documento como uma estrutura de árvore, onde cada nó é um objeto que representa uma parte do documento.
A Árvore DOM
No núcleo do DOM está a Árvore DOM, uma estrutura hierárquica semelhante a uma árvore que reflete a estrutura do seu documento HTML.
Exemplo de Árvore DOM




		
		
			
			
Java
			
			Documento
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Nó de Texto
        └── Tag A
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						Documento
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Nó de Texto
        └── Tag A
					
				
			
		


Componentes Principais

Documento: O nó raiz que representa todo o documento HTML ou XML.
Nós de Elemento: Representam elementos HTML como <html>, <head>, <body>, <h1>, <a>, etc.
Nós de Texto: Contêm o conteúdo de texto dentro dos elementos.
Atributos: Propriedades dos elementos, como class, id, href, etc.

Representação Hierárquica
Cada elemento na árvore DOM pode ter nós filhos, nós pais e nós irmãos, criando uma estrutura organizada e navegável.

Navegando na Árvore DOM
A manipulação eficaz do DOM depende da capacidade de navegar pela árvore DOM para acessar e modificar elementos específicos.
Acessando Nós
O JavaScript fornece vários métodos para acessar nós dentro do DOM:

document.getElementById(): Seleciona um elemento pelo seu id.
document.getElementsByClassName(): Seleciona todos os elementos com uma class específica.
document.getElementsByTagName(): Seleciona todos os elementos com um nome de tag específico.
document.querySelector(): Seleciona o primeiro elemento que corresponde a um seletor CSS.
document.querySelectorAll(): Seleciona todos os elementos que correspondem a um seletor CSS.

Percorrendo o DOM
Depois de selecionar um nó, você pode percorrer suas relações:

Nó Pai: Use parentNode para acessar o pai de um elemento.
Nós Filhos: Use childNodes para acessar todos os nós filhos ou children para elementos filhos.
Nós Irmãos: Use nextSibling e previousSibling para navegar entre irmãos.

Exemplo: Acessando e Percorrendo Nós




		
		
			
			
Java
			
			// Selecionando o elemento body
const body = document.body;

// Acessando o nó pai do body (que é HTML)
const parent = body.parentNode;

// Acessando o primeiro filho do body (por exemplo, uma tag h1)
const firstChild = body.firstElementChild;

// Registrando os elementos
console.log(parent);      // Saída: <html>...</html>
console.log(firstChild);  // Saída: <h1>...</h1>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						// Selecionando o elemento body
const body = document.body;
 
// Acessando o nó pai do body (que é HTML)
const parent = body.parentNode;
 
// Acessando o primeiro filho do body (por exemplo, uma tag h1)
const firstChild = body.firstElementChild;
 
// Registrando os elementos
console.log(parent);      // Saída: <html>...</html>
console.log(firstChild);  // Saída: <h1>...</h1>
					
				
			
		



Modificando o DOM com JavaScript
O JavaScript aproveita o DOM para atualizar dinamicamente o conteúdo, a estrutura e o estilo das páginas web. Esta seção explora como criar, modificar e manipular elementos do DOM.
Criando Elementos
Use document.createElement() para criar novos elementos.




		
		
			
			
Java
			
			// Criando um novo elemento de parágrafo
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Este é um novo parágrafo.';
			
				
					
				
					1
2
3
				
						// Criando um novo elemento de parágrafo
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Este é um novo parágrafo.';
					
				
			
		


Adicionando Elementos
Use appendChild() ou append() para adicionar o elemento recém-criado ao DOM.




		
		
			
			
Java
			
			// Adicionando o novo parágrafo ao body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
				
						// Adicionando o novo parágrafo ao body
document.body.appendChild(newParagraph);
					
				
			
		


Modificando Elementos Existentes
Altere o conteúdo ou os atributos de elementos existentes.




		
		
			
			
Java
			
			// Alterando o texto de um elemento h1 existente
const header = document.querySelector('h1');
header.textContent = 'Título Atualizado';

// Modificando um atributo de uma tag âncora
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
			
				
					
				
					1
2
3
4
5
6
7
				
						// Alterando o texto de um elemento h1 existente
const header = document.querySelector('h1');
header.textContent = 'Título Atualizado';
 
// Modificando um atributo de uma tag âncora
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
					
				
			
		


Removendo Elementos
Use removeChild() ou remove() para deletar elementos do DOM.




		
		
			
			
Java
			
			// Removendo o parágrafo recém-adicionado
document.body.removeChild(newParagraph);

// Alternativamente, usando remove()
newParagraph.remove();
			
				
					
				
					1
2
3
4
5
				
						// Removendo o parágrafo recém-adicionado
document.body.removeChild(newParagraph);
 
// Alternativamente, usando remove()
newParagraph.remove();
					
				
			
		



Métodos e Propriedades do DOM
O DOM oferece uma infinidade de métodos e propriedades que permitem aos desenvolvedores interagir e manipular páginas web de forma eficaz.
Métodos Comumente Usados do DOM


Método
Descrição


getElementById(id)
Recupera um elemento pelo seu id.


getElementsByClassName(class)
Recupera todos os elementos com a class especificada.


getElementsByTagName(tag)
Recupera todos os elementos com a tag especificada.


querySelector(selector)
Recupera o primeiro elemento que corresponde ao seletor.


querySelectorAll(selector)
Recupera todos os elementos que correspondem ao seletor.


createElement(tag)
Criar um novo elemento com o nome de tag especificado.


appendChild(child)
Adiciona um nó filho ao nó pai especificado.


removeChild(child)
Remove um nó filho do nó pai especificado.


setAttribute(attr, value)
Define o valor de um atributo no elemento especificado.


Propriedades Comumente Usadas do DOM


Propriedade
Descrição


innerHTML
Obtém ou define o conteúdo HTML dentro de um elemento.


textContent
Obtém ou define o conteúdo de texto dentro de um elemento.


parentNode
Referência ao nó pai de um elemento.


childNodes
Referência a todos os nós filhos de um elemento.


nextSibling
Referência ao próximo nó irmão de um elemento.


previousSibling
Referência ao nó irmão anterior de um elemento.


attributes
Referência a todos os atributos de um elemento.


style
Permite a modificação dos estilos inline de um elemento.



Exemplos Práticos
Para solidificar seu entendimento do DOM, vamos percorrer um exemplo prático que demonstra como acessar, modificar e manipular elementos do DOM.
Cenário de Exemplo
Imagine que você tem a seguinte estrutura HTML:




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>Meu Site</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="intro">Este é um parágrafo introdutório.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						<!DOCTYPE html>
<html>
<head>
    <title>Meu Site</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="intro">Este é um parágrafo introdutório.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
					
				
			
		


Objetivo

Alterar o texto do cabeçalho.
Atualizar o conteúdo do parágrafo.
Modificar a URL e o texto do link.
Adicionar um novo parágrafo dinamicamente.

Implementação Passo a Passo
1. Acessar e Modificar o Cabeçalho




		
		
			
			
Java
			
			// Selecionando o elemento h1
const heading = document.querySelector('h1');

// Atualizando o conteúdo de texto
heading.textContent = 'Descubra um Desenvolvimento Web Incrível!';
			
				
					
				
					1
2
3
4
5
				
						// Selecionando o elemento h1
const heading = document.querySelector('h1');
 
// Atualizando o conteúdo de texto
heading.textContent = 'Descubra um Desenvolvimento Web Incrível!';
					
				
			
		


2. Atualizar o Conteúdo do Parágrafo




		
		
			
			
Java
			
			// Selecionando o parágrafo pelo seu ID
const paragraph = document.getElementById('intro');

// Alterando o conteúdo de texto
paragraph.textContent = 'Aprenda como manipular o DOM para criar páginas web dinâmicas.';
			
				
					
				
					1
2
3
4
5
				
						// Selecionando o parágrafo pelo seu ID
const paragraph = document.getElementById('intro');
 
// Alterando o conteúdo de texto
paragraph.textContent = 'Aprenda como manipular o DOM para criar páginas web dinâmicas.';
					
				
			
		


3. Modificar a URL e o Texto do Link




		
		
			
			
Java
			
			// Selecionando a tag âncora pelo seu ID
const link = document.getElementById('myLink');

// Atualizando o atributo href
link.setAttribute('href', 'https://www.example.com');

// Alterando o texto do link
link.textContent = 'Visitar Example';
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Selecionando a tag âncora pelo seu ID
const link = document.getElementById('myLink');
 
// Atualizando o atributo href
link.setAttribute('href', 'https://www.example.com');
 
// Alterando o texto do link
link.textContent = 'Visitar Example';
					
				
			
		


4. Adicionar um Novo Parágrafo Dinamicamente




		
		
			
			
Java
			
			// Criando um novo elemento de parágrafo
const newParagraph = document.createElement('p');

// Definindo o conteúdo de texto
newParagraph.textContent = 'Este parágrafo foi adicionado dinamicamente usando JavaScript.';

// Adicionando o novo parágrafo ao body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Criando um novo elemento de parágrafo
const newParagraph = document.createElement('p');
 
// Definindo o conteúdo de texto
newParagraph.textContent = 'Este parágrafo foi adicionado dinamicamente usando JavaScript.';
 
// Adicionando o novo parágrafo ao body
document.body.appendChild(newParagraph);
					
				
			
		


Exemplo Completo de Código




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>Meu Site</title>
    <script>
        document.addEventListener('DOMContentLoaded', () =&gt; {
            // Acessar e Modificar o Cabeçalho
            const heading = document.querySelector('h1');
            heading.textContent = 'Descubra um Desenvolvimento Web Incrível!';

            // Atualizar o Conteúdo do Parágrafo
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Aprenda como manipular o DOM para criar páginas web dinâmicas.';

            // Modificar a URL e o Texto do Link
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visitar Example';

            // Adicionar um Novo Parágrafo Dinamicamente
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'Este parágrafo foi adicionado dinamicamente usando JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="intro">Este é um parágrafo introdutório.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						<!DOCTYPE html>
<html>
<head>
    <title>Meu Site</title>
    <script>
        document.addEventListener('DOMContentLoaded', () =&gt; {
            // Acessar e Modificar o Cabeçalho
            const heading = document.querySelector('h1');
            heading.textContent = 'Descubra um Desenvolvimento Web Incrível!';
 
            // Atualizar o Conteúdo do Parágrafo
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Aprenda como manipular o DOM para criar páginas web dinâmicas.';
 
            // Modificar a URL e o Texto do Link
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visitar Example';
 
            // Adicionar um Novo Parágrafo Dinamicamente
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'Este parágrafo foi adicionado dinamicamente usando JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p id="intro">Este é um parágrafo introdutório.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
					
				
			
		


Explicação da Saída
Após a execução do JavaScript:

O texto do <h1> muda para "Descubra um Desenvolvimento Web Incrível!"
O parágrafo com id="intro" atualiza seu conteúdo para "Aprenda como manipular o DOM para criar páginas web dinâmicas."
A tag âncora muda seu atributo href para "https://www.example.com", e seu texto atualiza para "Visitar Example".
Um novo parágrafo é adicionado ao final do body com o texto "Este parágrafo foi adicionado dinamicamente usando JavaScript."


Conclusão
O Document Object Model (DOM) é um conceito essencial para qualquer pessoa envolvida no desenvolvimento web. Ele fornece uma representação estruturada de documentos web, permitindo interações dinâmicas e manipulação de conteúdo em tempo real. Ao dominar o DOM, você pode criar aplicações web mais interativas, responsivas e amigáveis para o usuário.
Principais Aprendizados

Estrutura do DOM: Compreender a estrutura semelhante a uma árvore do DOM é fundamental para navegar e manipular páginas web.
Acessando Elementos: Utilize vários métodos do DOM para selecionar e acessar elementos específicos dentro do seu documento web.
Técnicas de Manipulação: Aprenda como criar, modificar e remover elementos para melhorar a interatividade das suas páginas web.
Aplicação Prática: Exemplos práticos solidificam o conhecimento teórico, facilitando a aplicação em cenários do mundo real.

Aproveite o poder do DOM para elevar suas habilidades em desenvolvimento web e criar sites envolventes e dinâmicos que se destacam.
Palavras-chave de SEO: DOM, Document Object Model, desenvolvimento web, manipulação DOM JavaScript, páginas web dinâmicas, métodos DOM, guia para iniciantes do DOM, JavaScript para iniciantes, manipulando o DOM, páginas web interativas
Nota: Este artigo foi gerado por IA.
Método	Descrição
getElementById(id)	Recupera um elemento pelo seu `id`.
getElementsByClassName(class)	Recupera todos os elementos com a `class` especificada.
getElementsByTagName(tag)	Recupera todos os elementos com a tag especificada.
querySelector(selector)	Recupera o primeiro elemento que corresponde ao seletor.
querySelectorAll(selector)	Recupera todos os elementos que correspondem ao seletor.
createElement(tag)	Criar um novo elemento com o nome de tag especificado.
appendChild(child)	Adiciona um nó filho ao nó pai especificado.
removeChild(child)	Remove um nó filho do nó pai especificado.
setAttribute(attr, value)	Define o valor de um atributo no elemento especificado.
Propriedade	Descrição
innerHTML	Obtém ou define o conteúdo HTML dentro de um elemento.
textContent	Obtém ou define o conteúdo de texto dentro de um elemento.
parentNode	Referência ao nó pai de um elemento.
childNodes	Referência a todos os nós filhos de um elemento.
nextSibling	Referência ao próximo nó irmão de um elemento.
previousSibling	Referência ao nó irmão anterior de um elemento.
attributes	Referência a todos os atributos de um elemento.
style	Permite a modificação dos estilos inline de um elemento.
Prós	Contras
Facilita a manipulação de conteúdo dinâmico	Pode levar a problemas de performance se mal utilizado
Melhora a interação do usuário	A complexidade aumenta com documentos maiores
Permite atualizações em tempo real sem recargas	Requer entendimento de estruturas de árvore