Summary: neste tutorial, aprenderá como usar o JavaScript getElementsByName() método para obter elementos com um determinado nome num documento.
Introdução ao JavaScript getElementsByName() method
Todos os elementos num documento HTML podem ter um atributo name:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
Não parecendo o atributo id, múltiplos elementos HTML podem partilhar o mesmo value do atributo name como este:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Para obter todos os elementos com um nome especificado, utiliza-se o getElementsByName() método do document objecto:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
O getElementsByName() aceita um name que é o valor do name atributo de elementos e devolve um NodeList vivo de elementos.
A colecção de elementos de retorno é ao vivo. Isto significa que os elementos de retorno são automaticamente actualizados quando elementos com o mesmo nome são inseridos e/ou removidos do documento.
JavaScript getElementsByName() example
O exemplo seguinte mostra uma lista de botões de rádio que têm o mesmo nome (rate).
Ao clicar no botão Rate, a página mostrará um diálogo de alerta que mostra a classificação do serviço como Very PoorPoorOKGood, e Very Good:
Code language: HTML, XML (xml)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript getElementsByName Demo</title></head><body> <p>Please rate the service:</p> <p> <input type="radio" name="rate" value="Very poor"> Very poor <input type="radio" name="rate" value="Poor"> Poor <input type="radio" name="rate" value="OK"> OK <input type="radio" name="rate" value="Good"> Good <input type="radio" name="rate" value="Very Good"> Very Good </p> <p> <button>Submit</button> </p> <script> let btn = document.getElementById('btnRate'); btn.addEventListener('click', () => { let rates = document.getElementsByName('rate'); rates.forEach((rate) => { if (rate.checked) { alert(`You rated: ${rate.value}`); } }) }); </script></body></html>
Como funciona:
- First, seleccionar o botão Rate pelo seu id
btnRateusando o métodogetElementById(). - Segundo, prender um evento de clique ao botão Rate para que quando o botão é clicado, uma função anónima seja executada.
- Terceiro, chamar o
getElementsByName()noclickmanipulador de eventos para seleccionar todos os botões de rádio que têm o nomerate. - Finalmente, iterar sobre os botões de rádio. Se um botão de rádio for verificado, então exibir um alerta que mostra o valor do botão de rádio seleccionado.
Notificação de que irá aprender sobre eventos como click mais tarde. Por agora, só precisa de se concentrar no método getElementsByName().
Summary
- O
getElementsByName()devolve umNodeListvivo de elementos com um nome especificado. - O
NodeListé um objecto tipo array-like, não um objecto array.