JavaScript GetElementById: Acessando elementos do DOM pelo ID em JavaScript
Neste artigo, vamos falar sobre como acessar elementos do DOM pelo ID em JavaScript, utilizando o método getElementById().
Publicado em 1 de agosto de 2023
Glossário
Como acessar elementos do DOM pelo ID em JavaScript
O que é o DOM?
Quando estamos escrevendo código em JavaScript, uma das tarefas mais comuns é acessar elementos específicos do DOM (Documento Objeto Modelo). O DOM é a representação em memória de uma página HTML e nos permite manipular e interagir com seus elementos.
Acessando elementos do DOM pelo ID
Para acessar elementos do DOM pelo ID em JavaScript, podemos usar o método getElementById(). Esse método retorna uma referência ao elemento que possui o ID especificado. É uma maneira eficiente e conveniente de selecionar elementos específicos na página.
Sintaxe básica do getElementById()
var elemento = document.getElementById('id-do-elemento');Podemos ver que utilizamos a variável elemento para armazenar a referência ao elemento desejado. O parâmetro passado para o método getElementById() é o ID do elemento que queremos acessar. É importante ressaltar que o ID deve ser único na página, pois o método retornará o primeiro elemento que encontrar com o ID correspondente.
Além disso, vale destacar que o getElementById() é case-sensitive, ou seja, diferencia letras maiúsculas de minúsculas. Portanto, é importante garantir que o ID informado corresponda exatamente ao ID definido no elemento HTML.
Documentação do método getElementById()
O método getElementById() faz parte do objeto document, que representa o documento HTML atual. É um método amplamente suportado pelos navegadores e faz parte do padrão JavaScript.
Ao utilizar o getElementById(), é importante ter em mente que ele retorna null caso nenhum elemento com o ID especificado seja encontrado. Portanto, é sempre uma boa prática verificar se o elemento foi encontrado antes de realizar qualquer operação sobre ele.
Uma forma comum de verificar se o elemento foi encontrado é utilizando uma condicional, como no exemplo abaixo:
var elemento = document.getElementById('id-do-elemento');
if (elemento !== null) {
// Realizar operações com o elemento encontrado
}Outro detalhe importante é que o método getElementById() busca os elementos pelo seu atributo ID, sem considerar outros atributos, como classes, nome ou tag do elemento. Portanto, é fundamental atribuir IDs únicos e significativos aos elementos que serão acessados via JavaScript.
Exemplos de uso do método getElementById()
Vamos agora ver alguns exemplos práticos de como utilizar o método getElementById() para acessar elementos do DOM pelo ID em JavaScript.
Exemplo 1: Alterando o conteúdo de um elemento
Suponha que temos um parágrafo com o ID “mensagem” e queremos alterar o seu conteúdo utilizando JavaScript. Podemos fazer da seguinte forma:
var mensagemElemento = document.getElementById('mensagem');
mensagemElemento.innerHTML = 'Novo conteúdo do parágrafo';Neste exemplo, utilizamos o getElementById() para obter a referência ao parágrafo com o ID “mensagem”. Em seguida, utilizamos a propriedade innerHTML para alterar o conteúdo do parágrafo.
Exemplo 2: Estilizando um elemento
Digamos que tenhamos um botão com o ID “botao” e queremos mudar sua cor de fundo através de JavaScript. Podemos fazer assim:
var botaoElemento = document.getElementById('botao');
botaoElemento.style.backgroundColor = 'red';Neste caso, utilizamos o getElementById() para obter a referência ao botão com o ID “botao”. Em seguida, utilizamos a propriedade style para modificar o estilo do botão, definindo a cor de fundo como vermelha.
Dicas e melhores práticas para utilizar o getElementById() em JavaScript
Agora que já vimos como utilizar o método getElementById() para acessar elementos do DOM pelo ID em JavaScript, vamos finalizar com algumas dicas e melhores práticas para seu uso:
- Evite abusar do uso do
getElementById(). É recomendado buscar outras formas de seleção de elementos quando possível, como classes ou seletores CSS, para deixar o código mais legível e modular. - Utilize IDs significativos e coerentes com a função do elemento na página. Evite IDs genéricos, como “elemento1” ou “div2”. Isso facilitará a manutenção e entendimento do código no futuro.
- Verifique sempre se o elemento foi encontrado antes de realizar operações sobre ele. Utilize condicionais ou métodos de validação para evitar erros desnecessários em seu código.
- Aproveite as propriedades e métodos do elemento retornado pelo
getElementById()para realizar as operações desejadas. Você pode alterar o conteúdo, estilizar, controlar eventos, entre outras possibilidades.
Conclusão
Neste artigo, vimos como acessar elementos do DOM pelo ID em JavaScript utilizando o método getElementById(). Explicamos a sintaxe básica, a documentação desse método e mostramos exemplos práticos de uso.
É importante ressaltar a importância de utilizar IDs significativos e únicos, além de verificar se o elemento foi encontrado antes de manipulá-lo. Seguindo essas boas práticas, você poderá utilizar o getElementById() de forma eficiente e sem complicações em seus projetos JavaScript.
Espero que este artigo tenha sido útil para você entender melhor como acessar elementos do DOM pelo ID em JavaScript. Aproveite essa poderosa funcionalidade para criar interações dinâmicas e personalizadas em suas páginas web.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
