¿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

Qué es jQuery CDN y cómo cargar jQuery desde un CDN o desde servidor

Qué es jQuery CDN y cómo cargar jQuery desde un CDN o desde servidor

Cuando inicias un proyecto web te puede surgir la duda a la hora de incluir la biblioteca jQuery (o alguna otra conocida), ¿es mejor hacerlo desde un CDN o desde nuestro propio servidor?

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 ;