JavaScript Get Element By Name - HTML
Em várias situações, os programadores precisam obter o elemento HTML pelo atributo de nome. Suponha que o desenvolvedor queira acessar um controle de formulário, como um botão de rádio ou caixa de seleção, para ler ou manipular seu valor. Mais especificamente, o “nome”O atributo é usado para controles de formulário relacionado a agrupar e o mesmo nome pode ser fornecido a muitos controles, permitindo que eles sejam acessados como um único grupo.
Este post ilustrará os métodos para recuperar um elemento HTML pelo nome em JavaScript.
Como obter elementos pelo nome em JavaScript?
No JavaScript, você pode acessar um elemento HTML usando o atributo de nome com a ajuda dos seguintes métodos JavaScript predefinidos:
-
- getElementsByName () método
- Método querySelectorAll ()
Método 1: Obtenha o elemento pelo nome usando o método "getElementsByName ()"
Para obter o elemento HTML por nome, use o “getElementsByName ()”Método. Este método fornece uma coleção de elementos que têm o atributo de nome especificado.
Sintaxe
A sintaxe a seguir é usada para o método getElementsByName ():
documento.getElementsByName ("Nome")
Exemplo
Em primeiro lugar, crie seis botões. Cinco deles têm um “nome”Atributo usado para obter o elemento HTML“botão”. Anexe o evento OnClick com o sexto botão que chamará o “ApplyStyle ()”Funcionar para estilizar os cinco botões:
Defina uma função “ApplyStyle ()”Isso acionará o botão Clique e altere a cor de fundo de todos os botões. Para fazer isso, primeiro, obtenha todos os “botão”Elementos como um grupo chamando o“getElementsByName ()”Método:
função applystyle ()
const btns = documento.getElementsByName ("btn");
btns.foreach (btn =>
btn.estilo.Antecedentes = "CadetBlue";
);
Como você pode ver na saída enquanto clicar no botão, a cor de fundo dos cinco botões será alterada:
Método 2: Obtenha o elemento pelo nome usando o método “QuerySelectorAll ()”
Você também pode utilizar o “QuerySelectorAll ()”Método para obter elementos usando o“nome”Atributo em JavaScript. Este método é usado para recuperar todos os elementos em um documento que corresponde a um seletor/atributo especificado, como classe CSS, ID ou nome.
Sintaxe
A sintaxe dada é utilizada para obter o elemento pelo nome usando o “QuerySelectorAll () ” método:
documento.QuerySelectorAll ('[name = "n1"]');
Exemplo
No exemplo a seguir, mudaremos a cor apenas daqueles botões cujo nome é “BTN1”:
Na função definida, chamaremos primeiro o acesso a todos os elementos do botão cujo nome é “BTN1”E depois aplique o estilo:
função applystyle ()
const btns = documento.QuerySelectorAll ('[name = "btn1"]');
btns.foreach (btn =>
btn.estilo.Antecedentes = "CadetBlue";
);
A saída fornecida significa que apenas dois botões mudaram sua cor de fundo cujo nome é "BTN1":
Observação: Se você deseja obter um único elemento, é recomendável usar o documento.QuerySelector em vez do documento.QuerySelectorAll.
Conclusão
Para obter ou recuperar um elemento pelo nome, use o “getElementsByName ()" ou o "QuerySelectorAll ()" métodos. O método utilizado mais comum e eficiente para obter o elemento pelo nome é o método "getElementsByName ()". Este post ilustrou os métodos para recuperar um elemento HTML pelo nome em JavaScript.