Neste artigo vamos aprender a forma que temos de como selecionar elemento por ID do HTML com JavaScript puro, de forma fácil e correta.
Fala programador(a), bora aprender coisa nova?
No JavaScript temos diversas maneiras de selecionar um elemento, para fazer as alterações ou animações necessárias via DOM
Uma das formas é o id, que nos ajuda para selecionar elementos únicos
Ou seja, diferente de outros métodos ele seleciona apenas uma tag/elemento
Então vamos, lá:
// Selecionar por ID
let el = document.getElementById("idDoElemento");Devemos utilizar o método getElementById de document, vamos passar um parâmetro que é o id do elemento alvo
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Lembrando que não precisamos da #, que é utilizada no CSS, apenas o nome do id do elemento
Assim receberemos um elemento, que poderemos alterar suas propriedades como texto, CSS e mais
Outra forma seria utilizando seletor de CSS, com o método querySelector, veja:
// Selecionar elementos por seletor de CSS
let el = document.querySelector("#idDoElemento");Aqui precisamos do #, que faz parte do seletor de id da regra de CSS
E também receberemos apenas um único elemento como retorno desde método, caso seja encontrado
Conclusão
Neste artigo vimos uma forma de selecionar um elemento via id
Utilizamos o método getElementById, que é específico para este caso e nos retorna apenas um elemento
Caso queiramos mais de um, podemos utilizar os métodos: getElementsByClassName, getElementsByTagName ou querySelectoAll
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube