GetElementsByTagName

O método getElementsByTagName é usado em JavaScript para acessar uma lista de elementos HTML com um nome de tag específico. Ele retorna uma NodeList (coleção de nós) contendo todos os elementos com a tag especificada. A NodeList é uma lista ao vivo, o que significa que será automaticamente atualizada se novos elementos da mesma tag forem adicionados ou existentes forem removidos da página.

Aqui está a sintaxe básica do método getElementsByTagName:

var elementos = document.getElementsByTagName("nomeDaTag");
  • "nomeDaTag" é o nome da tag dos elementos que você deseja buscar, por exemplo, "div", "p", "ul", etc.

Após usar getElementsByTagName, você pode acessar os elementos recuperados, iterar sobre a NodeList e manipular os elementos conforme necessário. 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 getElementsByTagName</title>
</head>
<body>
    <div>Este é um div.</div>
    <p>Este é um parágrafo.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <script>
        // Acessando elementos pela tag
        var divs = document.getElementsByTagName("div");
        var paragrafos = document.getElementsByTagName("p");
        var itensLista = document.getElementsByTagName("li");

        // Manipulando os elementos
        console.log("Número de divs: " + divs.length);
        console.log("Número de parágrafos: " + paragrafos.length);
        console.log("Número de itens de lista: " + itensLista.length);
    </script>
</body>
</html>

Neste exemplo, os elementos com as tags "div", "p" e "li" são acessados usando getElementsByTagName, e o número de elementos de cada tipo é exibido no console.

Por favor, note que getElementsByTagName retorna uma NodeList, então você pode usar índices para acessar elementos específicos na coleção, assim como faria com um array.