Selecionando elementos por nome de tag

Para selecionar elementos pelo nome da tag, por exemplo, div, p, span, a, ul, você usa o Element.getElementsByTagName()método:

let elements = element.getElementsByTagName(tagName)Linguagem de código:  JavaScript  ( javascript )

O getElementsByTagName()método retorna uma série HTMLCollection de elementos com o nome da tag fornecido.

A seguir mostramos um documento HTML com alguns elementos:

<html>
<head>
  <title>JavaScript getElementsByTagName() example</title>
</head>
<body>

  <div id="container">
    <a href="https://nodejs.org/">Node.js</a>
    <a href="https://openjsf.org/">OpenJS Foundation</a>
  </div>
  <a href="https://github.com/tc39">Ecma TC39</a>

  <script src="js/app.js"></script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

E o código a seguir mostra o número de links e seus hrefatributos:

let links = document.getElementsByTagName('a');

// return the number of links
console.log('Link Count:', links.length);

// show the href of links
for (let i = 0; i < links.length; i++) {
    console.log(links[i].href);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

Link Count: 3
https://nodejs.org/
https://openjsf.org/
https://github.com/tc39
Linguagem de código:  JavaScript  ( javascript )

Para obter os elementos do link dentro de um elemento, selecione primeiro o elemento contêiner e chame o getElementsByTagName()método no elemento selecionado:

const container = document.getElementById('container');

const links = container.getElementsByTagName('a');

for (let i = 0; i < links.length; i++) {
    console.log(links[i].href);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

https://nodejs.org/
https://openjsf.org/Linguagem de código:  JavaScript  ( javascript )

Selecionando Elementos por Nome de Classe

Obtenha os filhos de um elemento

Deixe um comentárioCancelar resposta