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 documentobjeto ou de um elemento DOM específico.
O getElementsByTagName()método aceita um nome de tag e retorna um conjunto HTMLCollectionde 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 argumentso 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 deH2tags. - Por fim, mostre o número de
H2tags 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érieHTMLCollectionde elementos. OHTMLCollectioné um objeto semelhante a um array.
