Menu
Coddy logo textTech

getElementsByClassName

Lição 5 de 13 do curso Métodos DOM do JavaScript da Coddy.

A função getElementsByClassName() retorna um array de todos os elementos com um atributo de classe correspondente, útil para selecionar múltiplos elementos que compartilham o mesmo estilo ou comportamento. Por exemplo:

const elements = document.getElementsByClassName("className");

O código acima recupera os elementos com a classe className e os salva em uma variável chamada elements.

Temos que iterar sobre esta variável para alterar as propriedades de todos os elementos semelhantes, por exemplo:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}
challenge icon

Desafio

Fácil

Você recebeu um código HTML que contém parágrafos com o nome de classe highlight.

Usando apenas JavaScript, altere a cor e o peso da fonte do texto:

  1. Recupere os elementos usando a função getElementsByClassName().
  2. Itere sobre essa variável de elementos recuperados usando um loop for.
  3. Modifique a color para “orange” e o fontWeight  para “bold” usando a propriedade style, para cada elemento no array.

Você precisará atualizar a página da web para ver as alterações:

Experimente você mesmo

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Todas as lições de Métodos DOM do JavaScript