document.getElementById vs jQuery $ ()

Es esto:

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

Lo mismo que esto:

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 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.

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].

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.

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 .

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

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

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']);

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.

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

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.

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.

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

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

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