Resumo : neste tutorial você aprenderá como usar o getElementsByName()
método JavaScript para obter elementos com um determinado nome em um documento.
Introdução ao método JavaScript getElementsByName()
Cada elemento em um documento HTML pode ter um name
atributo:
<input type="radio" name="language" value="JavaScript">
Linguagem de código: HTML, XML ( xml )
Ao contrário do id
atributo, vários elementos HTML podem compartilhar o mesmo value
atributo name
assim:
<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">
Linguagem de código: HTML, XML ( xml )
Para obter todos os elementos com um nome especificado, você usa o getElementsByName()
método do document
objeto:
let elements = document.getElementsByName(name);
Linguagem de código: JavaScript ( javascript )
O getElementsByName()
aceita a name
que é o valor do name
atributo dos elementos e retorna um live NodeList
dos elementos.
A coleção de elementos de retorno está ativa. Isso significa que os elementos de retorno são atualizados automaticamente quando elementos com o mesmo nome são inseridos e/ou removidos do documento.
Exemplo de JavaScript getElementsByName()
O exemplo a seguir mostra um grupo de opções que consiste em botões de opções com o mesmo nome ( rate
).
Quando você seleciona um botão de opção e clica no botão enviar, a página mostrará o valor selecionado, como Very Poor
, Poor
, OK
, Good
ou Very Good
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript getElementsByName Demo</title>
</head>
<body>
<p>Please rate the service:</p>
<p>
<label for="very-poor">
<input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
</label>
<label for="poor">
<input type="radio" name="rate" value="Poor" id="poor"> Poor
</label>
<label for="ok">
<input type="radio" name="rate" value="OK" id="ok"> OK
</label>
<label for="good">
<input type="radio" name="rate" value="Good"> Good
</label>
<label for="very-good">
<input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
</label>
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<p id="output"></p>
<script>
let btn = document.getElementById('btnRate');
let output = document.getElementById('output');
btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
output.innerText = `You selected: ${rate.value}`;
}
});
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Como funciona:
- Primeiro, selecione o botão enviar por seu id
btnRate
usando ogetElementById()
método. - Segundo, ouça o evento click do botão enviar.
- Terceiro, obtenha todos os botões de opção usando
getElementsByName()
e mostre o valor selecionado no elemento de saída.
Observe que você aprenderá sobre eventos mais click
tarde. Por enquanto, você só precisa se concentrar no getElementsByName()
método.
Resumo
- O
getElementsByName()
retorna uma sérieNodeList
de elementos com um nome especificado. - O
NodeList
é um objeto semelhante a um array, não um objeto de array .