Resumo : neste tutorial, você aprenderá como usar JavaScript getElementsByTagName()
para selecionar elementos com um determinado nome de tag.
Introdução ao getElementsByTagName()
método JavaScript
O getElementsByTagName()
é um método do document
objeto ou de um elemento DOM específico.
O getElementsByTagName()
método aceita um nome de tag e retorna um conjunto HTMLCollection
de elementos com o nome de tag correspondente na ordem em que aparecem no documento.
O seguinte ilustra a sintaxe do getElementsByTagName()
:
let elements = document.getElementsByTagName(tagName);
Linguagem de código: JavaScript ( javascript )
A coleção de retorno de getElementsByTagName()
está ativa, o que significa que é atualizada automaticamente quando elementos com o nome da tag correspondente são adicionados e/ou removidos do documento.
Observe que the HTMLCollection
é um objeto semelhante a um array, como arguments
o objeto de uma função.
getElementsByTagName()
Exemplo de JavaScript
O exemplo a seguir ilustra como usar o getElementsByTagName()
método para obter o número de tags H2 no documento.
Quando você clica no botão Contar H2 , a página mostra o número de tags H2:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript getElementsByTagName() Demo</title>
</head>
<body>
<h1>JavaScript getElementsByTagName() Demo</h1>
<h2>First heading</h2>
<p>This is the first paragraph.</p>
<h2>Second heading</h2>
<p>This is the second paragraph.</p>
<h2>Third heading</h2>
<p>This is the third paragraph.</p>
<button id="btnCount">Count H2</button>
<script>
let btn = document.getElementById('btnCount');
btn.addEventListener('click', () => {
let headings = document.getElementsByTagName('h2');
alert(`The number of H2 tags: ${headings.length}`);
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o botão Contagem H2 usando o
getElementById()
método. - Segundo, conecte o evento click do botão a uma função anônima.
- Terceiro, na função anônima, use the
document.getElementsByTagName()
para obter uma lista deH2
tags. - Por fim, mostre o número de
H2
tags usando aalert()
função.
Resumo
- O
getElementsByTagName()
é um método do documento ou objeto de elemento. - O
getElementsByTagName()
aceita um nome de tag e retorna uma lista de elementos com o nome de tag correspondente. - O
getElementsByTagName()
retorna uma sérieHTMLCollection
de elementos. OHTMLCollection
é um objeto semelhante a um array.