documento.getElementById frente a jQuery $()
Es esto:
var contents = document.getElementById('contents');
Lo mismo que este:
var contents = $('#contents');
¿Dado que jQuery está cargado?
¡¡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 del objeto (recuerde que los objetos JavaScript actúan de manera similar a las matrices asociativas).
var contents = $('#contents')[0]; //returns a HTML DOM Object
No.
La llamada document.getElementById('id')devolverá un objeto DOM sin formato.
La llamada $('#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()durante la $()llamada.
También puedes 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].
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));
}
Alterne comentando uno y luego comentando el otro. En mis pruebas,
document.getElementbyId promedió unos 35 ms (fluctuando desde
25msaproximadamente52ms)15 runs
Por otra parte, el
jQuery promedió unos 200 ms (que van
181msde222msaproximadamente15 runs).En esta sencilla prueba se puede ver que jQuery tardó aproximadamente 6 veces más.
Por supuesto, esto se trata de 10000iteraciones, por lo que en una situación más simple probablemente usaría jQuery para facilitar su uso y todas las demás cosas interesantes como .animatey .fadeTo. Pero eso sí, técnicamente getElementByIdes bastante más rápido .
Cercano, pero no igual. Obtienen 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.
