11 ‐ DOM - sabrinabm94/javascript GitHub Wiki
Neste capítulo, vamos explorar o Document Object Model (DOM) em JavaScript, um dos conceitos fundamentais para a criação de páginas web dinâmicas e interativas. Ao final deste capítulo, você terá uma compreensão básica do DOM e será capaz de manipular elementos HTML em suas páginas web utilizando JavaScript, mesmo que seja um iniciante em programação.
O DOM, ou Modelo de Objeto de Documento, é uma estrutura em árvore que representa todos os elementos HTML de uma página web. Cada elemento HTML na página é visto como um nó no DOM, proporcionando uma maneira de acessar e manipular dinamicamente o conteúdo, a estrutura e o estilo da página usando JavaScript. Em outras palavras, o DOM fornece uma interface de programação para o HTML, permitindo que desenvolvedores web criem interatividade e dinamismo em suas páginas através da manipulação dos elementos HTML utilizando JavaScript.
No JavaScript, os seletores CSS são utilizados para selecionar elementos HTML de forma dinâmica e interativa, possibilitando a manipulação desses elementos por meio de scripts. Ao usar os seletores CSS em JavaScript, podemos acessar elementos específicos da página com base em critérios como nome da tag, classe, ID, atributos, entre outros. Isso permite que os desenvolvedores criem funcionalidades interativas, modifiquem o conteúdo da página, apliquem estilos dinamicamente, adicionem ou removam elementos do DOM (Document Object Model) e respondam a eventos do usuário, como cliques e teclas pressionadas.
No DOM, os elementos HTML são organizados em uma estrutura hierárquica, onde cada elemento é um nó na árvore do DOM. O nó raiz é o próprio documento HTML, e os nós filhos são os elementos HTML contidos dentro do documento.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de DOM</title>
</head>
<body>
<div id="container">
<h1>Título</h1>
<p>Parágrafo</p>
</div>
</body>
</html>No exemplo acima, o nó raiz é o elemento <html>, e seus nós filhos são <head> e <body>. O nó <body> possui dois nós filhos, <div id="container"> e <h1>.
Em JavaScript, há várias formas de selecionar elementos no DOM (Document Object Model). Uma das formas mais comuns é usando métodos como getElementById, getElementsByClassName e getElementsByTagName, que retornam elementos com base em seus IDs, classes ou tags HTML, respectivamente.
Além disso, o método querySelector permite selecionar elementos com base em seletor CSS, enquanto querySelectorAll retorna todos os elementos que correspondem a um seletor CSS especificado. Vamos ver alguns exemplos abaixo.
O método getElements é uma família de métodos usados para selecionar elementos do DOM (Document Object Model) com base em critérios específicos. Existem três variantes principais deste método: getElementById, getElementsByClassName e getElementsByTagName.
Este método seleciona um elemento com base no valor do atributo id fornecido. Como os IDs são únicos em um documento HTML, este método retorna apenas um único elemento, o que o torna ideal para selecionar um elemento específico.
// Selecionar elemento por ID
let container = document.getElementById("container");
console.log(container);E aqui vemos o resultado da seleção do id container do nosso arquivo index.html:
Este método seleciona todos os elementos que possuem a classe CSS especificada. Ele retorna uma coleção HTML de elementos, permitindo selecionar múltiplos elementos com a mesma classe.
// Selecionar elementos por classe
let paragraphs = document.getElementsByClassName("paragraph");
console.log(paragraphs);
E ao captar o elemento do paragrafo (p), conseguimos acesso a algumas informações importantes desta tag HTML, como classList, um array com todas suas classes, localização na página com as propriedades clientHeight, clientLeft, clientTop e clientWidth, o valor do seu id, innerText que é o conteúdo do seu texto desta tag, entre outros:
Com essas informações do elemento, podemos alterar o seu conteúdo de texto ou até mesmo, criar novos elementos filhos para esse elemento, como também, modificar as informações deste elemento, deletar informações ou deletar até mesmo esse elemento desta página. Vou mostrar mais sobre a manipulação dos elementos do DOM ao decorrer desse capítulo.
Este método seleciona todos os elementos com a tag HTML especificada. Ele também retorna uma coleção HTML de elementos, possibilitando a seleção de todos os elementos de um determinado tipo, como <div>, <p>, <span>, entre outros.
// Selecionar elementos por tag
let headings = document.getElementsByTagName("h1");
console.log(headings);O resultado da seleção por tag retorna uma listagem de elementos HTML h1, como no exemplo só temos um elemento h1 na página, será retornada uma lista com somente um valor, e dentro dela, terá todas as propriedades do titulo da página.
O querySelector é um método em JavaScript que oferece uma maneira flexível e poderosa de selecionar elementos no DOM (Document Object Model) com base em seletores CSS.
O querySelector retorna o primeiro elemento dentro do documento que corresponde a um determinado seletor CSS. Ele retorna apenas o primeiro elemento que corresponde ao seletor especificado.
// Selecionar elementos usando seletores CSS - mostra o primeiro elemento encontrado
let firstParagraph = document.querySelector("p");
console.log(firstParagraph);No exemplo acima utilizamos o querySelector para fazer a seleção de um paragrafo na página, temos o retorno da tag p desejada, caso tivesse mais de um parágrafo nesse documento HTML ou seja, múltiplas tags p, teríamos como resultado somente um elemento, que seria a primeira tag p encontrada.
Por isso para selecionar muitos elementos com a mesma tag, ou até, a mesma classe, devemos usar o querySelectAll.
Já o método querySelectorAll retorna todos os elementos dentro do documento que correspondem a um determinado seletor CSS, como uma NodeList contendo todos os elementos que correspondem ao seletor especificado encontrados nesse documento HTML.
// Selecionar elementos usando seletores CSS - lista de todos os elementos encontrados
let allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs);Na seleção com o querySelectorAll temos como resultado uma listagem com todas as tags p encontradas na página, como só existe um desse elemento, temos somente uma tag listada no index 0 da listagem de seleção.
Podemos adicionar, remover e modificar elementos no DOM usando JavaScript.
// Criar um novo elemento
let newParagraph = document.createElement("p");
// criação do elemento do parágrafo
newParagraph.textContent = "Novo parágrafo";
// adição de um texto para o parágrafo
// Adicionar o novo elemento ao DOM
container.appendChild(newParagraph);
// anexo do elemento de parágrafo criado ao containerNeste exemplo, criamos um novo elemento p com o método createElement, e adicionamos um valor de texto pela propriedade textContent.
// Modificar o conteúdo de um elemento existente
firstParagraph.textContent = "Parágrafo modificado";No código acima, temos um parágrafo sem texto criado, e com o método textContent atribuímos um novo texto ao elemento p:
// Remover um elemento filho existente de um elemento pai
container.removeChild(newParagraph);Já no exemplo acima, estamos removendo o elemento p que se tornou um filho do elemento container após usarmos a função appendChild:
O CSS, ou Cascading Style Sheets, é uma linguagem de folha de estilo utilizada para estilizar documentos HTML e XML. Ele define como os elementos HTML devem ser exibidos na página, controlando aspectos visuais como cores, fontes, espaçamentos, alinhamentos e tamanhos. O CSS separa o conteúdo estrutural de um documento da sua apresentação visual, permitindo que os desenvolvedores criem layouts consistentes e atraentes para páginas da web.
Podemos alterar os estilos CSS dos elementos do DOM usando JavaScript para criar efeitos visuais dinâmicos em nossas páginas web.
// Alterar a cor de fundo de um elemento
container.style.backgroundColor = "lightblue";É possível alterar cores manipulando o css utilizando o Javascript. Neste exemplo, alteramos a cor do fundo do elemento container para azul claro:
// Alterar a largura de um elemento
let firstParagraph = document.querySelector(".paragraph");
firstParagraph.style.fontSize = "25px";Aqui alteramos o tamanho da fonte do parágrafo, aumentando para o tamanho de 25px usando a propriedade fontSize:
// Ocultar um elemento
firstParagraph.style.display = "none";Para alterar a visibilidade de um elemento, podemos alterar sua propriedade de display para none, e assim ocultar elementos na tela:
Aqui, ofereci uma breve introdução ao CSS aplicado com o JavaScript. Se você está interessado em explorar mais sobre o mundo do CSS e suas possibilidades, convido você a acompanhar minhas futuras publicações. Juntos, vamos mergulhar mais fundo nesse fascinante universo do design web!
Os eventos permitem que você crie interatividade em suas páginas web, respondendo a ações do usuário, como cliques, mouseovers e teclas pressionadas. Para isso, vamos ir adicionando alguns elementos html no nosso exemplo de código anterior, para ir desenvolvendo os exemplos desse capítulo.
Este é o evento que será acionado quando o elemento selecionado é clicado.
<button id="myButton">Clique Aqui</button>// Selecionando o botão pelo ID
const button = document.getElementById('myButton');
// Adicionando um ouvinte de evento de clique ao botão
button.addEventListener('click', () => {
console.log('O botão foi clicado!');
});O código adiciona um ouvinte de evento (listener) de clique a um botão com o ID "myButton". Quando o botão é clicado, uma mensagem é exibida no console:
Quando um formulário (form) é enviado, esse evento é acionado.
<form id="myForm">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>// Selecionando o formulário pelo ID
const form = document.getElementById('myForm');
// Adicionando um ouvinte de evento de submissão ao formulário
form.addEventListener('submit', (event) => {
event.preventDefault();
// Evita o comportamento padrão de envio do formulário
console.log('Formulário enviado!');
});Quando o formulário é enviado, uma mensagem é exibida no console:
O método preventDefault() é usado para evitar o comportamento padrão de envio do formulário, ou seja, ao usar esse método quando um formulário é enviado, a página é não será recarregada.
Quando o elemento indicado recebe o foco, pelo mouse ou pelo tab do teclado, esse evento é acionado.
<input type="text" id="myInput" placeholder="Digite algo...">// Selecionando o input pelo ID
const input = document.getElementById('myInput');
// Adicionando um ouvinte de evento de foco ao input
input.addEventListener('focus', () => {
console.log('Input recebeu foco!');
});Quando o input com id myInput recebe foco, uma mensagem é exibida no console do navegador:
Esse evento é disparado quando uma tecla do teclado é pressionada. Ele é acionado quando a tecla é pressionada para baixo e antes que a tecla seja liberada. Cada pressionamento de tecla dispara esse evento, independentemente de onde o foco está na página.
// Selecionando o input pelo ID
const input = document.getElementById('myInput');
// Adicionando um ouvinte de evento de tecla pressionada ao input
input.addEventListener('keydown', (event) => {
console.log(`Tecla pressionada: ${event.key}`);
});Neste exemplo, quando uma tecla é pressionada, seu nome é impresso no console:
```
Além dos principais eventos já comentados nesse capítulos, temos mais alguns eventos interessantes para enriquecer as interações do usuário com aplicativos web:
Aqui está a tabela atualizada com a nova coluna de exemplos de código para cada evento:
| Evento | Descrição | Exemplo de Código |
|---|---|---|
| mouseover | Ocorre quando o ponteiro do mouse está sobre o elemento. | document.getElementById("elementId").addEventListener("mouseover", function(event) { console.log("Mouse sobre o elemento"); }); |
| mouseout | Ocorre quando o ponteiro do mouse deixa o elemento. | document.getElementById("elementId").addEventListener("mouseout", function(event) { console.log("Mouse fora do elemento"); }); |
| change | Ocorre quando o valor de um elemento muda (para elementos de formulário). | document.getElementById("inputId").addEventListener("change", function(event) { console.log("Valor alterado"); }); |
| load | Ocorre quando um recurso e todos os seus recursos dependentes foram carregados. | window.addEventListener("load", function(event) { console.log("Página carregada"); }); |
| scroll | Ocorre quando o usuário rola a página. | window.addEventListener("scroll", function(event) { console.log("Rolagem da página"); }); |
| focusin | Ocorre quando um elemento ou um de seus descendentes ganha foco. | document.getElementById("elementId").addEventListener("focusin", function(event) { console.log("Elemento focado"); }); |
| focusout | Ocorre quando um elemento ou um de seus descendentes perde o foco. | document.getElementById("elementId").addEventListener("focusout", function(event) { console.log("Elemento perdeu o foco"); }); |
| input | Ocorre quando o valor de um elemento de entrada muda. | document.getElementById("inputId").addEventListener("input", function(event) { console.log("Valor de entrada alterado"); }); |
Aqui vimos alguns dos principais eventos em Javascript, temos muitos outros dos aqui apresentados, continue estudando o universo Javascript para expandir os seus conhecimentos!
No próximo capítulo, exploraremos um conceito fundamental no desenvolvimento web: a diferença entre operações assíncronas e síncronas em JavaScript. Vamos entender como lidar com tarefas que podem ocorrer simultaneamente ou que precisam ser executadas em sequência, o que é essencial para criar aplicativos web performáticas e eficientes.