Resumen: en este tutorial, aprenderás a utilizar el método JavaScript getElementsByName() para obtener elementos con un nombre determinado en un documento.
Introducción al método JavaScript getElementsByName()
Cada elemento de un documento HTML puede tener un atributo name:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
A diferencia del atributo id, varios elementos HTML pueden compartir el mismo value del atributo name así:
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
Para obtener todos los elementos con un nombre especificado, se utiliza el método getElementsByName() del objeto document:
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
El getElementsByName() acepta un name que es el valor del atributo name de los elementos y devuelve un NodeList vivo de elementos.
La colección de elementos devuelta es viva. Significa que los elementos devueltos se actualizan automáticamente cuando se insertan y/o eliminan del documento elementos con el mismo nombre.
Ejemplo de JavaScript getElementsByName()
El siguiente ejemplo muestra una lista de botones de radio que tienen el mismo nombre (rate).
Cuando se hace clic en el botón Rate, la página mostrará un diálogo de alerta que muestra la calificación del servicio como Very PoorPoorOKGood, y 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>
Cómo funciona:
- Primero, selecciona el botón Rate por su id
btnRateutilizando el métodogetElementById(). - Segundo, engancha un evento de clic al botón Rate para que cuando se pulse el botón se ejecute una función anónima.
- Tercero, llama al
getElementsByName()en el manejador de eventosclickpara seleccionar todos los botones de radio que tengan el nombrerate. - Por último, itera sobre los botones de radio. Si un botón de radio está marcado, entonces muestra una alerta que muestra el valor del botón de radio seleccionado.
- El
getElementsByName()devuelve unNodeListvivo de elementos con un nombre especificado. - El
NodeListes un objeto tipo array, no un objeto array. - ¿Ha sido útil este tutorial?
- Sí
Tenga en cuenta que aprenderá sobre eventos como click más adelante. Por ahora, sólo tienes que centrarte en el método getElementsByName().
Resumen
.