Obtenha o elemento com base no nome da classe em JavaScript
-
Obtenha um elemento baseado em seu nome de classe CSS com função Javascript
.getElementsByClassName() -
Obter elemento com base no nome da classe CSS com função Javascript
.querySelector() -
Obtenha vários elementos HTML com base no nome da classe CSS com a função
.querySelectorAll()
Podemos precisar consultar um elemento do DOM para alterar seu estilo dinamicamente no tempo de execução. Javascript tem várias funções embutidas que podem servir ao nosso propósito. O mais famoso deles é o .getElementById(). Mas .getElementById() retorna apenas um elemento, o primeiro elemento, cujo HTML id corresponde ao parâmetro passado para a função. A abordagem da função .getElementById() pode ser complicada se quisermos mudar os estilos de vários elementos ao mesmo tempo. Isso envolverá adicionar vários ids aos elementos HTML e consultá-los um de cada vez. Podemos fazer isso de uma maneira melhor? A seção a seguir descreve maneiras de obter elementos do DOM com base em seu nome de classe CSS.
Obtenha um elemento baseado em seu nome de classe CSS com função Javascript .getElementsByClassName()
Javascript possui um método embutido .getElementsByClassName() que nos permite consultar mais de um elemento HTML com base em seu nome de classe CSS. É um método disponível na interface Document e é normalmente usado como document.getElementsByClassName(). A função pesquisará o documento (o DOM) para todos os elementos com o nome da classe CSS especificado nos parâmetros da função.
De acordo com o MDN Docs, a função retorna a coleção ativa de elementos HTML. Isso significa que os elementos retornados pela função getElementsByClassName() podem ser modificados em tempo de execução se houver pedaços de código modificando os elementos DOM diretamente.
Sintaxe de getElementsByClassName
let el = document.getElementsByClassName(cssClassName);
O cssClassName deve ser uma string representando a classe CSS desejada. Se houver várias classes CSS, podemos mencioná-las separadas por espaços (como css-class1 css-class2 etc.)
Argumentos getElementsByClassName
A função tem um parâmetro, o nome da classe CSS. Em alguns casos, podemos exigir uma combinação de nomes de classes CSS para selecionar um elemento. Em tais cenários, podemos passar vários nomes de classes CSS separados por espaços.
Exemplo
Vamos consultar o seguinte trecho de código para entender o funcionamento.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
Resultado:
HTMLCollection(2)[div.bold, div.bold]
O código acima registrará uma coleção de elementos HTML no console. O console do Google Chrome mostrará uma saída conforme mostrado acima. Escrever o código document.getElementsByClassName("bold") dentro de window.onload garante que o código seja executado apenas depois que o HTML for renderizado. Observe que, ao contrário da função .getElementById(), a função getElementsByClassName() executa novamente um array de elementos HTML. Não podemos trabalhar diretamente no elemento, gerado por getElementsByClassName() como fazemos para .getElementById(). Se quisermos alterar o estilo bold no código acima para normal para o primeiro elemento, podemos usar o código a seguir.
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
Obter elemento com base no nome da classe CSS com função Javascript .querySelector()
getElementsByClassName() é um método amplamente usado e é restrito a selecionar elementos HTML com base em seu nome de classe CSS. Javascript tem outra função embutida disponível na interface Document, o querySelector(), que é mais genérico por natureza. Ele pode ser usado para consultar o elemento com base em seu nome de classe CSS. Esta funcionalidade é apenas um subconjunto das capacidades reais do querySelector(). A função Javascript querySelector() é comparável a .getElementById(), pois retorna o primeiro elemento que satisfaz o parâmetro de seleção passado em seus argumentos.
Sintaxe .querySelector()
A sintaxe é semelhante à de .getElementsByClassName().
let el = document.querySelector('.cssQuerySelector');
Parâmetros .querySelector()
O querySelector() aceita um tipo de dados de string como um parâmetro que representa o css query selector. Da mesma forma que usamos os seletores CSS para aplicar estilos particulares aos elementos selecionados. Inclui #<id> para selecionar um elemento HTML com base em seu id, .<css-class-name> para selecionar um elemento com base em seu nome de classe de estilo CSS e até mesmo uma combinação dos dois, como #<id>.<css-class-name>, pode ser usado para selecionar um elemento.
Exemplo
O código a seguir explica o uso de .querySelector().
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
Resultado:
<div class="bold">Element 1: Bolder text</div>
A saída é como aparece no console do navegador google chrome. Observe que a função .querySelector() retorna apenas um elemento HTML, ao contrário de .getElementsByClassName() que retorna uma coleção deles. Portanto, se quisermos processá-lo, podemos aplicar diretamente as alterações nele. Por exemplo, se quisermos alterar a fonte do elemento selecionado para normal, podemos fazer isso usando o código a seguir.
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
Obtenha vários elementos HTML com base no nome da classe CSS com a função .querySelectorAll()
Como o nome sugere, a função .querySelectorAll() em Javascript retorna uma coleção de elementos HTML que satisfazem os critérios de seleção. Assim como .querySelector(), o .querySelectorAll() aceita a string do seletor de consulta CSS como seu parâmetro. Ele retorna uma lista estática de elementos HTML, que não estão ativos. Ele se comporta de forma semelhante a .getElementsByClassName(), pois retorna vários elementos HTML consultados com base nele, mas não está limitado a ele. Assim como .querySelector(), podemos usar .querySelectorAll() para obter elementos baseados em seus ids ou nomes de classes CSS. Assim como selecionamos elementos com os Seletores de consulta nas folhas de estilo CSS.
Sintaxe .querySelectorAll()
document.querySelectorAll('<css-selector-string>');
Parâmetros .querySelectorAll()
A função aceita uma string de consulta CSS como seu único parâmetro de entrada. Para selecionar elementos com base no id, devemos usar o parâmetro #<id>. E para selecionar com base no nome da classe CSS, deve ser .<css-class-name>. Para a combinação dos dois, podemos usar o formato #<id>.<css-class-name>.
Exemplo
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
Resultado:
NodeList(2)
0: div.bold
1: div.bold
A saída é um array do tipo node list. Podemos processar esses nós ainda mais, selecionando-os na matriz e alterando seus valores de classe CSS de acordo com o requisito. Um exemplo é descrito pelo código a seguir. A linha els[0].style.fontWeight = "100"; fará com que o primeiro nó HTML selecionado tenha a espessura de fonte normal.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
Resultado:
NodeList(2)
0: div.bold
1: div.bold