JavaScript - getElementsByName()
Referência prática da função getElementsByName()
A atributo HTML name
se destinava originalmente a atribuir nomes a elementos de formulário e o valor desse atributo
é usado quando dados de formulário são enviados para um servidor. Assim como o atributo id
, name
atribui um nome
a um elemento. Ao contrário de id
, contudo, o valor de um atributo name
não precisa ser único: vários elementos
podem ter o mesmo nome e isso é comum no caso de botões de seleção e
caixa de seleção em formulários web. Além disso ao contrário de id
, o atributo
name
é válido somente em alguns elementos HTML, incluindo
formulários,
elementos de formulário, tag iframe
e tag
img.
var elementos = document.getElementsByName("nome-dos-elementos");
Exemplo
Este exemplo ilustra o retorno da função: sempre um NodeList.
<!-- HTML -->
<input type="radio" name="opt-moedas" value="real"/>Real
<input type="radio" name="opt-moedas" value="dolar"/>Dolar
<input type="radio" name="opt-moedas" value="euro"/>Euro
//
// JavaScript
//
var elementos = document.getElementsByName("opt-moedas");
console.log(elementos);
Juntos, HTML e JavaScript, produzem o seguinte resultado:
NodeList[
input property value = "on" attribute value = "real",
input property value = "on" attribute value = "dolar",
input property value = "on" attribute value = "euro"
]
Podemos acessar cada elemento, individualmente, através de seu índice.
console.log(elementos[0].value); // real
console.log(elementos[1].value); // dolar
console.log(elementos[2].value); // euro