JavaScript: Como selecionar elemento por classe

Neste artigo veremos como selecionar elemento por classe na linguagem JavaScript, para que depois sejam feitas as alterações necessárias via DOM.

E aí programador(a), bora aprender coisa nova?

No JavaScript temos diversas formas de selecionar elementos, para fazer alterações em seus aspectos via DOM

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Podemos selecionar por id, tags e também classes, que é o que veremos neste post

O método para selecionar um elemento por classe é o getElementsByClassName

Deve ser chamado pelo document e como estamos utilizando uma classe por seletor, ele tem uma particularidade importante

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Se houver dois elementos com a mesma classe, o método trará os dois, legal né? 😀

Então veja a sintaxe:

// Selecionar por classe
let els = document.getElementsByClassName("classeDosElementos");

Desta forma é possível selecionar elementos via classe com JavaScript

Obs: não adicione o . da classe como é feito no CSS, apenas o nome dela

Caso você opte por selecionar apenas um elemento, as melhores opções seriam por id ou query selector, veja as sintaxes:

// Selecionar por ID
let el = document.getElementById("idDoElemento");

// Selecionar elementos por seletor de CSS
let el = document.querySelector("seletorCSS");

Estes dois vão trazer apenas um único elemento

Lembrando que o querySelector espera um seletor de CSS, ou seja, utilizando # para ids e . para classses

Já o getElementById, apenas o nome do id em texto

Conclusão

Vimos que para selecionar um elemento por classe e vários elementos também utilizamos o método getElementsByClassName

Já se nossa opção por apenas de um elemento, é melhor preferir pelos métodos: getElementById ou querySelector

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube