JavaScript: Como selecionar elemento por ID

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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