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

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