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 nameatributo:
<input type="radio" name="language" value="JavaScript">Linguagem de código: HTML, XML ( xml )Ao contrário do idatributo, vários elementos HTML podem compartilhar o mesmo valueatributo nameassim:
<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 documentobjeto:
let elements = document.getElementsByName(name);Linguagem de código: JavaScript ( javascript )O getElementsByName()aceita a nameque é o valor do nameatributo dos elementos e retorna um live NodeListdos 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, Goodou 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
btnRateusando 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 clicktarde. Por enquanto, você só precisa se concentrar no getElementsByName()método.
Resumo
- O
getElementsByName()retorna uma sérieNodeListde elementos com um nome especificado. - O
NodeListé um objeto semelhante a um array, não um objeto de array .
