El método getElementsByName() devuelve la colección de todos los elementos de un documento en particular por nombre. Esta colección se denomina lista de Nodes y cada elemento de la lista de Nodes se puede visitar con la ayuda del índice.
Sintaxis:
document.getElementsByName(name)
Parámetro: Esta función acepta el nombre del documento.
Tipo de devolución: esta función devuelve una colección de elementos. Al usar la longitud del método incorporado, podemos encontrar el número total de elementos presentes dentro de ese elemento en particular. El siguiente ejemplo lo ilustra claramente.
Nota: No existe el método getElementByName(), es getElementsByName(), con una ‘s’.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByName()</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
// creating geeks function to display
// number of elements at particular name
function geeks() {
// taking list of elements under name ga
var x = document.getElementsByName("ga");
// printing number of elements inside alert tag
alert("Total element with name ga are: " + x.length);
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementsByName() Method</h2>
<!-- creating tag with name ga -->
<h4 name="ga">Geeks</h4>
<h4 name="ga">for</h4>
<h4 name="ga">Geeks</h4>
<input type="button" onclick="geeks()"
value="Click here" />
</body>
</html>
Producción:
Dado que el método document.getElementsByName() devuelve una array que contiene objetos, si queremos obtener el valor de cualquier objeto, debemos usar document.getElementsByName(“element_name”)[index].value. De lo contrario, obtendremos un resultado indefinido. El siguiente programa lo explica claramente.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByName()</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
<script>
// creating geeks function to display
// elements at particular name
function geeks() {
// This line will print entered result
alert(document.getElementsByName("ga")[0].value);
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementsByName() Method</h2>
<!-- This will create an input tag-->
<input type="text" name="ga" />
<br>
<br>
<!-- function will be called when we
click on this button-->
<input type="button" onclick="geeks()"
value="Click here" />
<p></p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método DOM getElementsByName() se enumeran a continuación:
- cromo 1
- Borde 12
- explorador de Internet 5
- Firefox 1
- Ópera 5
- Safari 1
Publicación traducida automáticamente
Artículo escrito por ankit15697 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA