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