document.getElementById vs jQuery $()

Question

es la siguiente:

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

El mismo que esto:

var contents = $('#contents'); 

Dado que jQuery se carga?

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, que pueden acceder al objeto jQuery y obtener el primer elemento en el objeto (Recuerde objetos JavaScript actúan similar a las matrices asociativas).

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

Answer 2

Nº

Calling document.getElementById('id') devolverá un objeto DOM prima.

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

Por lo tanto, solo puede llamar a los 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 3

No, de hecho el mismo resultado sería:

$('#contents')[0] 

jQuery no sabe cuántos resultados se volvió 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 jQuery tan conveniente es que los métodos más llamados en este objeto que parecen que están hechos el uno para el control, son en realidad en un bucle pidió a todos los miembros de la internacional él colección

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

Answer 4

Cierre, pero no es lo mismo. Obtienen el mismo elemento, pero la versión de jQuery está envuelta en un objeto jQuery.

El equivalente sería este

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

o este

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

Estos tirará del elemento fuera del objeto jQuery.

Answer 5

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 coincidido ningún elemento con el ID de contents.

El elemento DOM devuelto por document.getElementById('contents') le permite hacer cosas como el cambio del .innerHTML (o .value), etc, sin embargo, tendrá que utilizar jQuery methods en el objeto jQuery.

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

Es ms equivilent, sin embargo, si se compara ningún elemento con el id de contents, document.getElementById('contents') devolverá un valor nulo, pero $('#contents').get(0) volverá indefinido.

Uno de los beneficios del uso del objeto jQuery es que no obtendrá ningún error si no se devuelve ningún elemento, ya que siempre se devuelve un objeto. Sin embargo se producirán errores si se intenta realizar operaciones en el null devuelto por document.getElementById

Answer 6

Al igual que la mayoría de la gente ha dicho, la principal diferencia es el hecho de que se envuelve en un objeto jQuery con la llamada jQuery vs el DOM prima objeto usando JavaScript directo. El objeto jQuery podrá hacer otras funciones jQuery con él, por supuesto, pero si solo necesitas hacer una simple manipulación DOM como estilo básico o manejo básico de eventos, el método recto de JavaScript es siempre un poco más rápido que jQuery ya que no Tengo que cargar en una biblioteca externa de código creado en JavaScript. Guarda un paso extra.

Answer 7

En caso de que alguien llega a este ... Aquí hay otra diferencia:

Si el ID contiene caracteres que no son compatibles con el estándar HTML (ver a cuestionar here) entonces jQuery no puede encontrarlo aunque getElemenById hace .

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

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

fue capaz de encontrar mi elemento, pero:

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

no lo hizo.

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

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

Answer 8

Otra diferencia: getElementById devuelve el partido primera, mientras $('#...') devuelve una colección de partidos - Sí, el mismo ID se puede repetir en un documento HTML.

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

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

Podría parecer extraño utilizar identificadores duplicados, pero si usted está usando algo así como Wordpress, una plantilla o un complemento podría utilizar el mismo ID que se utiliza en el contenido. La selectividad de jQuery podría ayudarte a salir.

Answer 9

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

var contents = $('#contents');

Los fragmentos de código no son lo mismo.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. (jQuery documentation). Internamente jQuery usa document.getElementById() para mayor eficiencia.

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

---

Al comprobar el proyecto de github para jQuery me encontré siguientes fragmentos de línea, que parece estar usando códigos document.getElementById (https://github.com/jquery/jquery/blob/master/src/core/init.js línea 68 en adelante)

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

Answer 10

Una nota sobre la diferencia de velocidad. Adjuntar la siguiente snipet 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)); 
} 

alternativo al comentar un out y luego comentar la otra fuera. En mis pruebas,

document.getElementById promedio de alrededor de 35 ms (fluctuando de 25ms hasta 52ms seguir sobre 15 runs)

Por otro lado, el

jQuery promedio de alrededor 200ms (que van desde 181ms hasta 222ms en aproximadamente 15 runs).

De esta simple prueba se puede ver que el jQuery tomó aproximadamente 6 veces como largo.

Por supuesto, esto es más de 10000 iteraciones por lo que en una situación más simple que probablemente utilice el jQuery para la facilidad de uso y todas las otras cosas interesantes como .animate y .fadeTo. Pero sí, técnicamente getElementById es bastante más rápido.

Answer 11

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