Em várias situações, os programadores precisam obter o elemento HTML pelo atributo name. Suponha que o desenvolvedor queira acessar um controle de formulário, como um botão de opção ou caixa de seleção, para ler ou manipular seu valor. Mais especificamente, o “ nome ” é usado para agrupar controles de formulário relacionados e o mesmo nome pode ser fornecido para vários controles, permitindo que eles sejam acessados como um único grupo.
Este post irá ilustrar os métodos para recuperar um elemento HTML por nome em JavaScript.
Como obter elementos por nome em JavaScript?
Em JavaScript, você pode acessar um elemento HTML usando seu atributo name com a ajuda dos seguintes métodos JavaScript predefinidos:
-
- Método getElementsByName()
- método querySelectorAll()
Método 1: obter elemento por nome usando o método “getElementsByName ()”
Para obter o elemento HTML pelo nome, use o botão “ getElementsByName() ” método. Este método fornece uma coleção de elementos que possuem o atributo name especificado.
Sintaxe
A seguinte sintaxe é usada para o método getElementsByName():
document.getElementsByName ( 'nome' )
Exemplo
Em primeiro lugar, crie seis botões. Cinco deles têm um “ nome ” atributo que é usado para obter o elemento HTML “ botão ”. Anexe o evento onclick com o sexto botão que chamará o “ aplicarEstilo() ” para estilizar os cinco botões:
< botão nome = 'btn' > Botão botão >< botão nome = 'btn' > Botão botão >
< botão nome = 'btn' > Botão botão >
< botão nome = 'btn' > Botão botão >
< botão nome = 'btn' > Botão botão > < br >< br >
< botão ao clicar = 'aplicarEstilo()' > Clique aqui botão >
Defina uma função “ aplicarEstilo() ” que será acionado no clique do botão e mudará a cor de fundo de todos os botões. Para fazer isso, primeiro, pegue todos os “ botão ” elementos como um grupo chamando o método “ getElementsByName() ” método:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Como você pode ver na saída ao clicar no botão, a cor de fundo dos cinco botões será alterada:
Método 2: obter elemento por nome usando o método “querySelectorAll ()”
Você também pode utilizar o “ querySelectorAll() ” método para obter elementos usando o método “ nome ” em JavaScript. Este método é usado para recuperar todos os elementos em um documento que corresponda a um seletor/atributo especificado, como classe CSS, id ou nome.
Sintaxe
A sintaxe fornecida é utilizada para obter o elemento pelo nome usando o “ querySelectorAll()” método:
document.querySelectorAll ( '[nome='n1']' ) ;
Exemplo
No exemplo a seguir, mudaremos a cor apenas dos botões cujo nome é “ btn1 ”:
< div >< nome do botão = 'btn' > Botão botão >
< nome do botão = 'btn1' > Botão botão >
< nome do botão = 'btn' > Botão botão >
< nome do botão = 'btn1' > Botão botão >
< nome do botão = 'btn' > Botão botão > < br >< br >
< botão ao clicar = 'aplicarEstilo()' > Clique aqui botão >
div >
Na função definida, chamaremos de primeiro acesso todos os elementos do botão cujo nome é “ btn1 ” e, em seguida, aplique estilo nele:
const btns = document.querySelectorAll ( '[nome='btn1']' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
A saída dada 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 document.querySelector em vez de document.querySelectorAll.
Conclusão
Para obter ou recuperar um elemento pelo nome, use o comando “ getElementsByName() ' ou o ' querySelectorAll() ' métodos. O método utilizado de forma 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 por nome em JavaScript.