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.