Como usar o método getElementsByTagName em JavaScript

Como usar o método getElementsByTagName em JavaScript

O "getElementByTagName ()”É o método específico do elemento DOM que retorna todos os elementos presentes em uma página da web junto com seu nome de tag. Aceita o “Nome da tag”Como argumento e retorna sua coleção ao vivo que apareceu em todo o documento. A coleção ao vivo significa que fornece a lista atualizada automaticamente se algum dos elementos HTML será adicionado ou removido do documento.

Este guia explica como usar o “getElementsByTagName ()”Método em JavaScript.

Como usar o método "getElementsByTagName ()" em JavaScript?

O "getElementByTagName ()”É usado principalmente para acessar um elemento HTML específico através de seu nome de tag.

Sintaxe

var elements = documento.getElementsByTagName (tagname);

Na sintaxe acima, a ““tagname”Corresponde à tag do elemento que precisa ser buscada.

Agora, vamos aplicar o “getElementByTagName ()”Método de maneiras diferentes com a ajuda dos seguintes exemplos.

Exemplo 1: Aplicando o método "getElementsByTagName ()" para contar "

" Tag

Neste exemplo, a contagem do “

(parágrafo)”As tags podem ser calculadas usando o“getElementsByTagName ()”Método através da função definida pelo usuário.

Código HTML

Vamos ver o seguinte código HTML:

Conte o parágrafo usando o método getElementsByTagName ()


Isto é o primeiro parágrafo.


Isto é o segundo parágrafo.


Isto é o terceiro parágrafo.


Isto é o quarto parágrafo.


No código HTML acima:

  • O "

    ”Declara a primeira subposição.

  • O "

    ”TAG define os parágrafos declarados. Também inclui o “”Tag em negrito para negrito uma palavra específica.

  • O "”A tag adiciona um botão com um associado“ONCLICKEvento redirecionando para a função chamada “contar()”Isso será acionado no botão Clique.

Código JavaScript

Em seguida, vá para o código JavaScript:

Nas linhas acima do código:

  • Defina uma função chamada “contar()”.
  • Em sua definição, declare a variável “Pára”Acessando os parágrafos incluídos através do“documento.getElementByTagName ()”Método.
  • Depois disso, um “alerta”A caixa é utilizada para exibir o número total de parágrafos usando o“comprimento" propriedade.

Saída

Como visto, a saída aparece um “Caixa de alerta”Isso exibe a contagem total do“

Exemplo 2: Aplicando o método "getElementsByTagName ()" para contar "

" Tag

Neste exemplo, o método discutido pode ser aplicado da mesma forma, conte o “

Código HTML

Em primeiro lugar, observe o código HTML abaixo fornecido:

Método getElementsByTagName ()


Sintaxe


Trabalhando


Uso


Significado


Conclusão



Nas linhas acima do código:

  • O "

    cria o primeiro subtítulo.

  • Depois disso, cinco “

    ”As tags são especificadas exibindo as subtítulos declarados.

  • Finalmente, associe o “OndblClickEvento com o “”Tag e redirecionar para a função“total()”Após o botão, clique duas vezes.

Código JavaScript

Em seguida, visão geral do código JavaScript:

No código JavaScript acima:

  • Em primeiro lugar, defina a função “total()”Função.
  • Na definição da função, busque a lista de

    tags no documento atual com a ajuda do “documento.getElementByTagName ()”Método.

  • Por fim, crie uma caixa "alerta" que exibe a mensagem fornecida usando o "comprimento" propriedade.

Saída

A saída mostra a contagem total i.e., ““5”Das tags html“

Exemplo 3: Aplicando o método "getElementsByTagName ()" para personalizar os elementos

Além da lista dos elementos HTML, o “getElementByTagName ()”Também pode ser aplicado para personalizar os elementos também.

Código HTML

Passe pelo seguinte código HTML:

Personalize o parágrafo usando o método getElementsByTagName ()


Isto é o primeiroparágrafo.


Isto é o segundoparágrafo.


Isto é o terceiroparágrafo.


Isto é o quartoparágrafo.


No código HTML acima:

  • Lembre -se das abordagens discutidas para incluir um título e especifique os parágrafos declarados no “

    " marcação.

  • Agora, crie um botão com um associado “OndblClickEvento redirecionando para a função chamada “total()”. É tal que a função será invocada no botão clique duas vezes.

Código JavaScript

Agora, dê uma olhada no código JavaScript:

No bloco de código acima:

  • Primeiro de tudo, defina a função “total()”.
  • Em sua definição, da mesma forma, acesse o incluído “

    ”Tags usando o“documento.getElementByTagName ()”Método.

  • Em seguida, aplique um “para”Faça um loop para iterar ao longo dos parágrafos incluídos com a ajuda do“comprimento" propriedade.
  • Dentro do loop, aplique uma borda a todos os parágrafos com base na personalização especificada por meio do “estilo.fronteira" propriedade.

Saída

A saída mostra que o estilo de fronteira mencionado é implementado para todos os “

Conclusão

O "getElementsByTagName ()”O método em JavaScript auxilia os usuários a invocar a coleção ao vivo de elementos HTML específicos com base em nomes de tags. Ele retorna a lista atualizada de elementos HTML em caso de qualquer modificação no documento. Além disso, também pode ser utilizado para personalizar o conteúdo específico do elemento HTML, conforme os requisitos de uma só vez. Este guia demonstrou o uso completo do “getElementsByTagName ()”Método em JavaScript.