📚 Estudando JavaScript

🔍 Pesquisar:


🌳 Estrutura do DOM

A tag <html> é a raiz (root element) do documento HTML. Seus filhos diretos são <head> e <body>, formando a árvore do DOM (Document Object Model).


🔧 getElementById

getElementById é uma função fundamental em JavaScript para obter e operar elementos do DOM. Ela permite que você aponte e obtenha um elemento específico da sua página HTML, indicando seu atributo id.

🧠 Características de Uso


🛠️ Manipulação de Elementos Obtidos com getElementById

Após obter um elemento, você pode realizar diversas operações:

📥 Obter Propriedades

✏️ Modificar Propriedades


🧪 Exemplo Prático

<p id="mensagem">Texto original</p>

<script>
  let elemento = document.getElementById("mensagem");
  elemento.innerHTML = "Texto modificado via JavaScript!";
  elemento.style.color = "blue";
</script>

🧭 Contexto e Importância


🧮 Comparação com Outros Seletores

Método Retorno Seleção por
getElementById Elemento único (HTMLElement) ID
getElementsByTagName Coleção (HTMLCollection) Tag
querySelectorAll Lista (NodeList) CSS selector

Observação: getElementsByTagName e querySelectorAll retornam listas (coleções), funcionando como arrays ou vetores.


✅ Resumo

getElementById é um método essencial para interagir com elementos específicos na sua página HTML. Ele permite tanto a leitura quanto a modificação de propriedades e conteúdos, sendo uma das ferramentas mais utilizadas para criar interatividade com JavaScript.

💡 Exercício Prático com getElementById

Neste exemplo, vamos capturar três elementos HTML diferentes pelo atributo id e, em seguida, manipulá-los de formas variadas. Assim, você verá na prática como o método getElementById pode ser usado em conjunto com arrays e laços de repetição.

⚙️ Estrutura HTML


<div id="cx1">Caixa 1</div>
<div id="cx2">Caixa 2</div>
<div id="cx3">Caixa 3</div>
  

📝 Código JavaScript


// Capturando os elementos pelo ID
const caixaUm = document.getElementById('cx1');
const caixaDois = document.getElementById('cx2');
const caixaTres = document.getElementById('cx3');

// Testando no console
console.log(caixaUm);       // Imprime o elemento inteiro
console.log(caixaUm.id);    // Imprime o ID do elemento
console.log(caixaUm.innerHTML); // Imprime o conteúdo interno

// Alterando o conteúdo de cada caixa individualmente
caixaUm.innerHTML = "HTML - Hyper Text Markup Language";
caixaDois.innerHTML = "CSS - Cascading Style Sheets";
caixaTres.innerHTML = "JS - JavaScript";

// Agrupando em um array
const arrayElementos = [caixaUm, caixaDois, caixaTres];

// Percorrendo o array com for...of
for (let d of arrayElementos) {
  d.innerHTML = "Linguagem de Programação WEB";
}

// Mostrando o array no console
console.log(arrayElementos);
  

🔍 Observações Importantes

💡 Dica: se você tivesse 100 caixas, seria inviável escrever linha por linha. O uso de arrays + loops torna o código mais limpo e eficiente.

💡 Exercício com map()

Além do for...of, também é possível usar o método map() para percorrer arrays em JavaScript. O map() executa uma função em cada item do array e retorna um novo array com os resultados.

⚙️ Estrutura HTML


<div id="cx1">Caixa 1</div>
<div id="cx2">Caixa 2</div>
<div id="cx3">Caixa 3</div>
  

📝 Código JavaScript


// Capturando os elementos pelo ID
const caixaUm = document.getElementById('cx1');
const caixaDois = document.getElementById('cx2');
const caixaTres = document.getElementById('cx3');

// Agrupando em um array
const arrayElementos = [caixaUm, caixaDois, caixaTres];

// Usando map() para modificar os elementos
arrayElementos.map((elemento) => {
  elemento.innerHTML = "Linguagem de Programação";
  console.log(elemento);
});
  

🔍 Diferença entre for e map()

Aspecto for / for...of map()
Objetivo Executar uma ação em cada item (efeito colateral, como alterar o DOM). Criar um novo array transformado a partir do original.
Retorno Não retorna nada por padrão (a menos que você armazene manualmente). Retorna sempre um novo array com os valores resultantes da função.
Uso típico Alterar dados, atualizar DOM, executar efeitos colaterais. Transformar dados, gerar novas listas, processar informações.
No caso do DOM É a abordagem mais natural, pois você quer manipular elementos. Pode ser usado, mas não aproveita bem a ideia de retornar novos valores, já que o DOM é manipulado diretamente.
💡 Dica: Use for ou forEach quando quiser apenas executar ações (como atualizar a tela). Use map() quando quiser criar um novo array baseado no original (por exemplo: extrair só os IDs dos elementos).