alternative - html javascript getelementbyid

document.getElementById vs jQuery $()

Question

Es esto:

var contents = document.getElementById(''contents'');

Lo mismo que esto:

var contents = $(''#contents'');

Dado que jQuery está cargado?

Answer 1

¡¡No exactamente!!

document.getElementById(''contents''); //returns a HTML DOM Object

var contents = $(''#contents'');  //returns a jQuery Object

En jQuery, para obtener el mismo resultado que document.getElementById , puede acceder al objeto jQuery y obtener el primer elemento en el objeto (Recuerde que los objetos de JavaScript actúan de forma similar a los arrays asociativos).

var contents = $(''#contents'')[0]; //returns a HTML DOM Object

Answer 2

Al igual que la mayoría de la gente ha dicho, la principal diferencia es el hecho de que está envuelto en un objeto jQuery con la llamada jQuery frente al objeto DOM sin formato utilizando JavaScript directo. El objeto jQuery podrá realizar otras funciones de jQuery con él, por supuesto, pero si solo necesita realizar una simple manipulación de DOM como un estilo básico o un manejo de eventos básico, el método de JavaScript directo es siempre un poco más rápido que jQuery ya que no lo hace. t tiene que cargar en una biblioteca externa de código construido en JavaScript. Se ahorra un paso extra.

Answer 3

Cerca, pero no lo mismo. Están obteniendo el mismo elemento, pero la versión jQuery está envuelta en un objeto jQuery.

El equivalente sería este

var contents = $(''#contents'').get(0);

o esto

var contents = $(''#contents'')[0];

Estos sacarán el elemento del objeto jQuery.

Answer 4

Desarrollé una base de datos noSQL para almacenar árboles DOM en navegadores web donde las referencias a todos los elementos DOM en la página se almacenan en un breve índice. Por lo tanto, la función "getElementById ()" no es necesaria para obtener / modificar un elemento. Cuando los elementos del árbol DOM se crean instancias en la página, la base de datos asigna claves primarias sustitutas a cada elemento. Es una herramienta gratuita http://js2dx.com

Answer 5

En caso de que alguien más golpee esto ... Aquí hay otra diferencia:

Si el ID contiene caracteres que no son compatibles con el estándar HTML (consulte la pregunta SO here ), es posible que jQuery no lo encuentre, incluso si getElementById lo hace.

Esto me sucedió con un ID que contiene "/" caracteres (ej: id = "a / b / c"), usando Chrome:

var contents = document.getElementById(''a/b/c'');

Pude encontrar mi elemento pero:

var contents = $(''#a/b/c'');

No.

Por cierto, la solución simple fue mover esa identificación al campo de nombre. JQuery no tuvo problemas para encontrar el elemento usando:

var contents = $(''.myclass[name=''a/b/c'']);

Answer 6

No, en realidad el mismo resultado sería:

$(''#contents'')[0] 

jQuery no sabe cuántos resultados se obtendrían de la consulta. Lo que obtienes es un objeto jQuery especial que es una colección de todos los controles que coinciden con la consulta.

Parte de lo que hace que jQuery sea tan conveniente es que la mayoría de los métodos llamados en este objeto, que parecen estar destinados a un solo control, se encuentran en un bucle llamado en todos los miembros de la colección.

Cuando utiliza la sintaxis [0], toma el primer elemento de la colección interna. En este punto obtienes un objeto DOM

Answer 7

No.

Al llamar a document.getElementById(''id'') se devolverá un objeto DOM en bruto.

Llamar a $(''#id'') devolverá un objeto jQuery que envuelve el objeto DOM y proporciona métodos jQuery.

Por lo tanto, solo puede llamar a métodos jQuery como css() o animate() en la llamada $() .

También puede escribir $(document.getElementById(''id'')) , que devolverá un objeto jQuery y es equivalente a $(''#id'') .

Puede obtener el objeto DOM subyacente de un objeto jQuery escribiendo $(''#id'')[0] .

Answer 8

No. El primero devuelve un elemento DOM, o nulo, mientras que el segundo siempre devuelve un objeto jQuery. El objeto jQuery estará vacío si no se ha emparejado ningún elemento con el ID de contents .

El elemento DOM devuelto por document.getElementById(''contents'') permite hacer cosas como cambiar el .innerHTML (o .value ), etc., sin embargo, deberá usar los métodos jQuery en el objeto jQuery.

var contents = $(''#contents'').get(0);

Es más equívoco, sin embargo, si ningún elemento con el id de contents coincide, document.getElementById(''contents'') devolverá null, pero $(''#contents'').get(0) devolverá indefinido.

Una ventaja de usar el objeto jQuery es que no obtendrá ningún error si no se devolvió ningún elemento, ya que siempre se devuelve un objeto. Sin embargo, obtendrá errores si intenta realizar operaciones en el null devuelto por document.getElementById

Answer 9

Otra diferencia: getElementById devuelve la primera coincidencia, mientras que $(''#...'') devuelve una colección de coincidencias: sí, la misma ID se puede repetir en un documento HTML.

Además, se llama a getElementId desde el documento, mientras que $(''#...'') se puede llamar desde un selector. Entonces, en el código a continuación, document.getElementById(''content'') devolverá todo el cuerpo, pero $(''form #content'')[0] regresará dentro del formulario.

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

Puede parecer extraño usar identificaciones duplicadas, pero si está usando algo como Wordpress, una plantilla o complemento puede usar la misma identificación que usa en el contenido. La selectividad de jQuery podría ayudarte a salir.

Answer 10

Una nota sobre la diferencia de velocidad. Adjunte el siguiente fragmento a una llamada onclick:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById(''myID'');
            $(''#myID'')[0];
        }


    console.log(''timer: '' + (new Date() - timer));
}

Alternar comentar uno y luego comentar el otro. En mis pruebas,

document.getElementbyId promedió unos 35 25ms (fluctuando desde 25ms hasta 52ms 25ms en aproximadamente 15 runs )

Por otro lado, la

jQuery promedió unos 200 ms (desde 181ms hasta 222ms en aproximadamente 15 runs ).

A partir de esta simple prueba, se puede ver que la jQuery tomó aproximadamente 6 veces más.

Por supuesto, eso es más de 10000 iteraciones, por lo que en una situación más simple, probablemente usaría jQuery para facilitar su uso y todas las otras cosas interesantes como .animate y .fadeTo . Pero sí, técnicamente getElementById es un poco más rápido .

Answer 11

var contents = document.getElementById(''contents'');

var contents = $(''#contents'');

Los fragmentos de código no son los mismos. el primero devuelve un objeto Element ( source ). El segundo, jQuery equivalente devolverá un objeto jQuery que contiene una colección de cero o un elemento DOM. ( documentación de jQuery ). Internamente, jQuery utiliza document.getElementById() para la eficiencia.

En ambos casos, si se encuentra más de un elemento, solo se devolverá el primer elemento.

Cuando revisé el proyecto github para jQuery, encontré los siguientes fragmentos de línea que parecen estar utilizando los códigos document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js línea 68)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );