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

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