document.getElementById vs jQuery $ ()

620

Es esto:

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

Lo mismo que esto:

var contents = $('#contents');

Dado que jQuery está cargado?

Phillip Senn
fuente
10
Además de los puntos planteados en las respuestas, la versión jQuery es la aplicación. 100 veces más lento
8
¿Está esto probado en alguna parte?
FranBran 01 de
12
@torazaburo En realidad, la versión jQuery ni siquiera es 3 veces más lenta (al menos, como mínimo, Chrome). Ver: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski el
2
@ MichałPerłakowski en ese enlace, la versión jquery es 10 veces más lenta. 26mil vs 2.4mil
Claudiu Creanga
1
El enlace actualizado correcto para JSPerf es: jsperf.com/getelementbyid-vs-jquery-id En mi caso (FF 58) es 1000 veces más lento. De todos modos, jQuery todavía realiza 2.5 millones de operaciones por segundo. En general, eso no es un problema, y ​​ciertamente no se puede comparar en términos de funcionalidad.
Diego Jancic

Respuestas:

1017

¡¡No exactamente!!

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

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

En jQuery, para obtener el mismo resultado 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
John Hartsock
fuente
24
Para cualquier persona interesada document.getElementByno funciona correctamente en <IE8. También obtiene elementos por namelo que teóricamente podría argumentar document.getElementByIdque no solo es engañoso, sino que puede devolver valores incorrectos. Creo que @John nuevo esto, pero pensé que no estaría de más agregarlo.
Lima
14
Tenga cuidado si su identificador no es fijo. $('#'+id)[0]no es igual a document.getElementById(id)porque idpuede contener caracteres que se tratan de forma especial en jQuery!
Jakob
1
Esto fue muy útil, ¡nunca lo supe! Sin embargo, estoy seguro de que lo he usado antes, que es lo que me desconcierta. ¡Oye, aprendes algo todos los días! ¡Gracias!
jedd.ahyoung
3
google jquery equivalent of document.getelementbyidy el primer resultado es esta publicación. ¡¡¡gracias!!!
ajakblackgoat
$('#contents')[0].iddevuelve el nombre de identificación.
Omar
139

No.

Llamar document.getElementById('id')devolverá un objeto DOM sin procesar.

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()en la $()llamada.

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

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

SLaks
fuente
44
¿Sabes cuál es más rápido: $ (document.getElementById ('element')) vs $ ('# element')?
Ivan Ivković
10
@ IvanIvković: El primero es más rápido, ya que no implica el análisis de cadenas.
SLaks
1
@SLaks ¿Cuál es la principal diferencia entre el objeto DOM sin procesar y el objeto jQuery? ¿Solo que usando el objeto jQuery tenemos la capacidad de aplicar los métodos jQuery?
Roxy'Pro
@ Roxy'Pro: Son objetos diferentes. Los objetos jQuery envuelven objetos DOM. Ver la documentación.
Fugas
Este documento JavaScript DOM Objects vs.jQuery Objects parece útil. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439
31

Cerca, pero no es 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 extraerán el elemento del objeto jQuery.

RightSaidFred
fuente
29

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));
}

Alterna comentando uno y luego comenta el otro. En mis pruebas

document.getElementbyId promedió aproximadamente 35 ms (fluctuante de 25mshasta 52msaproximadamente 15 runs)

Por otro lado, el

jQuery promedió alrededor de 200 ms (desde aproximadamente 181mshasta 222msaproximadamente 15 runs)

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

Por supuesto, eso se debe a las 10000iteraciones, 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 .animatey .fadeTo. Pero sí, técnicamente getElementByIdes bastante más rápido .

nurdyguy
fuente
Gracias por esta respuesta Quería preguntar, ¿debería reemplazar todo $('#someID') con document.getElementById("someID") ? Estoy trabajando en algo en lo que he usado mucho $('#someID')y mi página se ejecuta lentamente para entradas de archivos grandes. Por favor, sugiérame cuál debería ser mi movimiento.
Mazhar MIK
Si está reutilizando el mismo varias veces en el mismo ámbito, guárdelo, como var $myId = $('#myId');y reutilice la variable guardada $myId. Sin embargo, encontrar por id es algo bastante rápido, por lo que si la página es lenta, probablemente haya una razón diferente.
nurdyguy
Gracias @nurdyguy. Eso fue útil. Intentaré implementar eso.
Mazhar MIK
17

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 contentscoincide ningún elemento con el id .

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

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

Es más equitativo, sin embargo, si ningún elemento con el id de contentscoincide, document.getElementById('contents')devolverá nulo, pero $('#contents').get(0)volverá indefinido.

Una ventaja de usar el 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, obtendrá errores si intenta realizar operaciones en el nulldevuelto pordocument.getElementById

Mate
fuente
15

No, en realidad el mismo resultado sería:

$('#contents')[0] 

jQuery no sabe cuántos resultados se devolverí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 invocados en este objeto que parecen estar destinados a un solo control, en realidad están en un bucle llamado a todos los miembros de la colección

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

Andrey
fuente
10

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

Si la identificación contiene caracteres que no son compatibles con el estándar HTML (consulte la pregunta SO aquí ), entonces jQuery puede no encontrarlo incluso si getElementById sí.

Esto me sucedió con una identificación que contenía 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 era mover esa identificación al campo de nombre. JQuery no tuvo problemas para encontrar el elemento usando:

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

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 que usa JavaScript directo. El objeto jQuery podrá realizar otras funciones de jQuery con él, por supuesto, pero, si solo necesita hacer una simple manipulación DOM como un estilo básico o un manejo básico de eventos, el método directo de JavaScript siempre es un poco más rápido que jQuery ya que no lo hace ' No tiene que cargar en una biblioteca externa de código construido en JavaScript. Se ahorra un paso extra.

Kobby
fuente
5

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

var contents = $('#contents');

Los fragmentos de código no son lo mismo. el primero devuelve un Elementobjeto ( fuente ). 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.


Al verificar el proyecto github para jQuery, encontré los siguientes fragmentos de línea que parecen estar usando los 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] );
Nipuna
fuente
4

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

Además, getElementIdse llama 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]volverá dentro del formulario.

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

Puede parecer extraño usar ID duplicados, 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.

Steve Banks
fuente
2

jQuery está construido sobre JavaScript. Esto significa que es solo JavaScript de todos modos.

document.getElementById ()

El método document.getElementById () devuelve el elemento que tiene el atributo ID con el valor especificado y devuelve nulo si no existe ningún elemento con el ID especificado. Un ID debe ser único dentro de una página.

Jquery $ ()

Llamar a jQuery () o $ () con un selector de id como argumento devolverá un objeto jQuery que contiene una colección de cero o un elemento DOM. Cada valor de id debe usarse solo una vez dentro de un documento. Si a más de un elemento se le ha asignado la misma ID, las consultas que usen esa ID solo seleccionarán el primer elemento coincidente en el DOM.

Hadi Mir
fuente
1

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 índice corto. 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 primarias sustitutas a cada elemento. Es una herramienta gratuita http://js2dx.com

Gonki
fuente
1

Todas las respuestas anteriores son correctas. En caso de que quiera verlo en acción, no olvide que tiene la consola en un navegador donde puede ver el resultado real como el cristal:

Tengo un HTML:

<div id="contents"></div>

Vaya a la consola (cntrl+shift+c)y use estos comandos para ver su resultado claramente

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

Como podemos ver, en el primer caso obtuvimos la etiqueta en sí (es decir, estrictamente hablando, un objeto HTMLDivElement). En este último, en realidad no tenemos un objeto simple, sino una matriz de objetos. Y como se menciona en otras respuestas anteriores, puede usar el siguiente comando:

$('#contents')[0]
>>> div#contents
Mazhar MIK
fuente
1

Todas las respuestas son antiguas hoy a partir de 2019, puede acceder directamente a los archivos con clave de identificación en JavaScript, simplemente pruébelo

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

Demo en línea! - https://codepen.io/frank-dspeed/pen/mdywbre

frank-dspeed
fuente