Como obter elemento por tipo em javascript

Existem várias maneiras de obter ou buscar um elemento em JavaScript, incluindo getElementById () e getElementByclass (). No entanto, você já pensou em obter o tipo de elemento? Nesse caso, vamos dizer que JavaScript oferece os métodos querySelectorAll () ou getElementsByTagName () que podem ser utilizados para o objetivo especificado.

Este artigo explicará os métodos para obter elementos por tipo em JavaScript.

Como obter elemento por tipo em javascript?

Para obter elementos por tipo, use os seguintes métodos:

• método querySelectorAll ()
• getElementsByTagName () Método

Vamos verificar cada um dos métodos mencionados um por um!

Método 1: Obtenha elemento por tipo usando o método querySelectorAll ()

““QuerySelectorAll ()”É um método de documento predefinido JavaScript que retorna os objetos do elemento que correspondem aos seletores especificados. Os métodos querySelectorAll () e querySelector () funcionam da mesma forma, mas a principal diferença é que o querySelectorAll () obtém todos os elementos correspondem ao seletor, enquanto o método querySelector () retorna apenas o primeiro elemento correspondente objeto.

Sintaxe
Siga a sintaxe dada para o elemento Getting By Type usando o método querySelectorall ():

documento.QuerySelectorAll (seletores);

Aqui o "Seletor”É o tipo cujos elementos você deseja obter, por exemplo,“entrada" ou "Entrada [Type = Text]”. Ele descobrirá todos os elementos combinados com o seletor especificado e retornarão ao DOM. Você pode passar vários seletores separados por vírgulas.

Exemplo 1: Obtenha um elemento por tipo
No exemplo a seguir, criaremos um campo de entrada “texto"Com id"Nome"E valor"John”E um título:

Obtenha elemento por tipo = entrada [type = text]

Além disso, crie três tipos de entrada “rádio”Ao atribuir IDs e valores:

Html

CSS

JavaScript

Em seguida, crie um botão anexando “ONCLICK”Evento que acionará o método definido pelo usuário chamado“ElementGetByType ()”:

Clique

Em um arquivo JavaScript, primeiro, ligue para o “QuerySelectorAll ()”Método passando um seletor“Entrada [Type = Text]”Isso retornará todos os elementos deste tipo. Então, defina um “ElementGetByType ()”Método em que um método alert () imprime a mensagem com o valor do seletor especificado:

var elementTypeSelector = documento.QuerySelectorAll ('input [type = text]');
função elementgetByType ()
alerta ("o texto de entrada do elemento html contém" + elementTypeseSelector [0].valor);

A saída exibe “John”Na mensagem de alerta, que é o valor do campo de texto do tipo de entrada:

Exemplo 2: Obtenha todos os elementos por tipo
Agora, obtenha todos os elementos do tipo de entrada passando “entrada"Como um argumento no"QuerySelectorAll ()”Método:

var elementTypeSelector = documento.QuerySelectorAll ('entrada');

Imprima os valores do “entrada"Seletor, incluindo"texto" e "rádio”No console:

console.Log (ElementTypeSelector [0].Valor, ElementTypeSelector [1].Valor, ElementTypeSelector [2].Valor, ElementTypeSelector [3].valor);

Saída

Método 2: Obter elemento por tipo usando getElementsByTagName () Método

Há outro método predefinido de JavaScript chamado “getElementsByTagName ()”Isso retorna os objetos do elemento cujo nome de tag corresponde ao nome especificado.

Sintaxe
Use a seguinte sintaxe para usar o método getElementByTagName ():

documento.getElementsByTagName (nome);

Aqui, "nomeӃ o nome da tag de um atributo html.

Exemplo
Neste exemplo, obteremos o valor do elemento por tipo usando o “getElementsByTagName ()”Método, onde passaremos o nome da tag“entrada”Para obter os valores do elemento a corresponder com o nome de tag especificado e armazená -lo em uma variável“ElementTypeSelector”. Então, defina um “ElementGetByType ()”Função, na qual o loop for itera até o comprimento do seletor e verifique o tipo do seletor; Se for igual a "rádio", chame o método alert () para imprimir os valores do elemento de rádio:

var elementTypeSelector = documento.getElementsByTagName ('input');
função elementgetByType ()
para (vamos i = 0; i < elementTypeSelector.length; i++)
if (elementTypeseSelector [i].tipo == 'rádio')
Alert ("O Rádio do tipo de entrada do elemento HTML contém" + ElementTypeSelector [i].valor);

A saída mostra todos os valores do rádio do tipo de entrada:

Fornecemos todas as soluções para obter elementos por tipo em javascript.

Conclusão

Para obter os elementos por tipo, use os métodos predefinidos JavaScript, incluindo o método querySelectorall () ou o método getElementsByTagName (). A única diferença entre os dois é que o getElementsByTagName () apenas pegou itens cujo nome de tag definido corresponde à tag fornecida enquanto querySelectorAll, que seleciona todos os elementos. Neste artigo, explicamos as diferentes abordagens para obter elementos por tipo em javascript.