GetElementsByClassName

getElementsByClassName é um método JavaScript usado para acessar elementos HTML com base em sua classe. Ele retorna uma coleção de todos os elementos com uma classe específica. Este método está disponível no objeto document, que representa o documento HTML atual carregado no navegador. Aqui está a sintaxe básica:

var elementos = document.getElementsByClassName("nomeDaClasse");

"nomeDaClasse" é o nome da classe que você deseja buscar.

Após usar getElementsByClassName, você pode manipular os elementos recuperados, iterando sobre a coleção e alterando suas propriedades, conteúdo ou estilo. Aqui está um exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo getElementsByClassName</title>
    <style>
        .destaque {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="destaque">Este parágrafo tem a classe "destaque".</p>
    <p>Este parágrafo não tem a classe "destaque".</p>

    <script>
        // Acessando elementos pelo nome da classe
        var elementos = document.getElementsByClassName("destaque");

        // Iterando sobre os elementos e alterando seu estilo
        for (var i = 0; i < elementos.length; i++) {
            elementos[i].style.fontWeight = "bold";
        }
    </script>
</body>
</html>

Neste exemplo, todos os elementos com a classe "destaque" são acessados e seu estilo é alterado para font-weight: bold;.

Lembre-se de que getElementsByClassName retorna uma coleção ao vivo (uma NodeList), o que significa que, se você adicionar ou remover elementos com a classe especificada após obter a coleção, ela será automaticamente atualizada para refletir as mudanças. Isso pode ser útil em algumas situações, mas também requer atenção ao manipular a coleção para evitar comportamentos inesperados.