¿Cuál es la diferencia entre getElementsByName y getElementById en JavaScript?

Estrada Web Group
Administrador
¿Cuál es la diferencia entre getElementsByName y getElementById en JavaScript?

curso de javascript, aprende a programar, getbyvalngetbyid

Recientemente un amigo me preguntaba ¿cuál es la diferencia entre document.getElementsByName y document.getElementById? para los que no saben cuáles son las diferencias entre ellos, a continuación te las presento.

  • getElementsByName obtiene elementos por el atributo de nombre, getElementById obtiene el elemento por su atributo id.
  • Puede haber muchos elementos en una página con el mismo nombre que en este caso usamos getElementsByName para obtener la lista de elementos / matriz, pero debe haber  sólo un elemento con un identificador dado que en este caso usamos getElementById para obtener un solo elemento.

Más temas para aprender Javascript:

¿Cuál es la diferencia entre getElementsByName y getElementById en JavaScript?

¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?

¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?

¿Cómo generar y leer archivos .zip con Javascript?

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

Para todos los programadores no hay como un ejemplo práctico, a continuación puedes ver el código fuente.

 <%@ Page Language="Vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Difference between getelementsbyname & getelementbyid in JavaScript - An Example
    </title>

    <script type="text/javascript">
   
    // function to get value by getelementbyid document
    function GetById()
    {
        document.getElementById("div1").innerHTML=document.getElementById("num").value;
    }
   
    // function to get value by document.getelementsbyname
    function GetByName()
    {
        var nums= document.getElementsByName("number");
        var result='';
        for(var i=0; i<nums.length; i++)
        {
            result+=nums[i].value +"<br/>";
            document.getElementById("div1").innerHTML= result;
        }
    }   
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="num" value="12345" />
        <input type="text" name="number" value="number1" />
        <input type="text" name="number" value="number2" />
        <input type="text" name="number" value="number3" />
    </div>
    <br />
    <div id="div1" style="border-style: solid; border-width: thin; border-color: inherit;
        width: 625px; height: 100px;">
        Div Section
    </div>
    <br />
    <input type="button" onclick="GetById();" value="Get Element By Id" />
    <input type="button" onclick="GetByName();" value="Get Element By Name" />
    </form>
</body>

</html>

 

Compartir artículo:

Más artículos geniales

Cómo usar los bucles en JavaScript con For, While o Do While

Cómo usar los bucles en JavaScript con For, While o Do While

En este artículo, explicare el uso básico de las estructuras de control para producir bucles o repeticiones. Los bucles pueden ejecutar bloques de código cualquier cantidad de veces que sea necesario.

Ver artículo completo
Cómo filtrar elementos en un array con el método filter() en JavaScript

Cómo filtrar elementos en un array con el método filter() en JavaScript

Resumen: en este tutorial, aprenderás a usar el método filter() de Array en JavaScript para filtrar elementos en un arreglo.

Ver artículo completo
Cómo comprobar si un valor existe en un arreglo con JavaScript?

Cómo comprobar si un valor existe en un arreglo con JavaScript?

Array.every() y Array.some() son métodos JavaScript que nos ayudan a comprobar si en un arreglo o matriz se cumple una condición específica.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla