document.getElementById vs jQuery $()

Question

è questa:

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

Lo stesso di questo:

var contents = $('#contents'); 

Dato che jQuery è caricato?

Answer 1

Non esattamente !!

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

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

---

In jQuery, per ottenere lo stesso risultato document.getElementById, è possibile accedere all'oggetto jQuery e ottenere il primo elemento nell'oggetto (Ricordate oggetti JavaScript agiscono simile a Array Associativi).

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

Answer 2

No.

Calling document.getElementById('id') restituirà un oggetto DOM grezzo.

La chiamata $('#id') restituirà un oggetto jQuery che avvolge l'oggetto DOM e fornisce i metodi jQuery.

Pertanto, è possibile chiamare solo metodi jQuery come css() o animate() sulla chiamata $().

È inoltre possibile scrivere $(document.getElementById('id')), che restituirà un oggetto jQuery ed è equivalente a $('#id').

È possibile ottenere l'oggetto DOM sottostante da un oggetto jQuery scrivendo $('#id')[0].

Answer 3

No, in realtà lo stesso risultato sarebbe:

$('#contents')[0] 

jQuery non so quanti risultati vengono restituiti dalla query. Quello che ottieni è un oggetto jQuery speciale che è una raccolta di tutti i controlli che corrispondono alla query.

Parte di ciò che rende jQuery così conveniente è che la maggior parte metodi chiamati su questo oggetto che sembrano sono pensati per un controllo, sono in realtà in un ciclo ha invitato tutti i membri int egli collezione

Quando si utilizza il [0] sintassi si prende il primo elemento dalla raccolta interna. A questo punto si ottiene un oggetto DOM

Answer 4

Chiudi, ma non uguale. Stanno ottenendo lo stesso elemento, ma la versione jQuery è racchiusa in un oggetto jQuery.

L'equivalente sarebbe questo

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

o questa

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

Questi tirerà l'elemento fuori dell'oggetto jQuery.

Answer 5

No. Il primo restituisce un elemento DOM, o null, mentre il secondo restituisce sempre un oggetto jQuery. L'oggetto jQuery sarà vuoto se nessun elemento con l'id di contents è stato abbinato.

L'elemento DOM restituito da document.getElementById('contents') ti permette di fare cose come il cambiamento del .innerHTML (o .value) ecc, tuttavia è necessario utilizzare jQuery methods sul oggetto jQuery.

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

è più equivilent, se nessun elemento con l'id di contents è abbinata, document.getElementById('contents') tornerà null, ma $('#contents').get(0) tornerà indefinito.

Un vantaggio sull'utilizzo dell'oggetto jQuery è che non si otterranno errori se non viene restituito alcun elemento, poiché un oggetto viene sempre restituito. Tuttavia si ottengono errori se si tenta di eseguire operazioni sul null restituito da document.getElementById

Answer 6

Proprio come la maggior parte delle persone hanno detto, la differenza principale è il fatto che esso è avvolto in un oggetto jQuery con la chiamata jQuery contro il DOM grezzo oggetto usando il diritto JavaScript. L'oggetto jQuery sarà in grado di fare altre funzioni jQuery con esso, ma, se hai solo bisogno di fare semplici manipolazioni DOM come lo stile di base o la gestione di base degli eventi, il metodo JavaScript diretto è sempre un po 'più veloce di jQuery dal momento che non lo fai t necessario caricare in una libreria esterna di codice costruita su JavaScript. Salva un ulteriore passaggio.

Answer 7

Nel caso in cui qualcun altro colpisce di questa ... Ecco un'altra differenza:

Se l'ID contiene caratteri che non sono supportati dallo standard HTML (vedere così in discussione here) poi jQuery non può trovare, anche se lo fa getElementById .

Questo è accaduto a me con un id contenente "/" caratteri (es: id = "a/b/c"), utilizzando Chrome:

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

stato in grado di trovare il mio elemento, ma:

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

no.

A proposito, la semplice soluzione era spostare quell'ID nel campo del nome. JQuery non ha avuto problemi a trovare l'elemento utilizzando:

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

Answer 8

Un altra differenza: getElementById restituisce la partita prima, mentre $('#...') restituisce un insieme di partite - sì, lo stesso ID può essere ripetuto in un documento HTML.

Inoltre, getElementId viene chiamato dal documento, mentre $('#...') può essere chiamato da un selettore. Quindi, nel codice sottostante, document.getElementById('content') restituirà l'intero corpo ma $('form #content')[0] restituirà all'interno del modulo.

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

Potrebbe sembrare strano utilizzare gli ID duplicati, ma se si utilizza qualcosa come Wordpress, un modello o un plug-in potrebbe utilizzare lo stesso ID come si usa nel contenuto. La selettività di jQuery potrebbe aiutarti.

Answer 9

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

var contents = $('#contents');

I frammenti di codice non sono gli stessi.il primo restituisce un oggetto Element (source). Il secondo, equivalente a jQuery restituirà un oggetto jQuery contenente una raccolta di zero o un elemento DOM. (jQuery documentation). Internamente jQuery usa document.getElementById() per l'efficienza.

In entrambi i casi, se viene trovato più di un elemento, verrà restituito solo il primo elemento.

---

Controllando il progetto github per jQuery ho trovato seguenti frammenti di linea che sembra essere utilizzando codici document.getElementById (https://github.com/jquery/jquery/blob/master/src/core/init.js linea 68 in poi)

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

Answer 10

Una nota sulla differenza di velocità. Fissare il seguente snipet a una chiamata 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 commentando uno fuori e poi commentare l'altro fuori. Nel mio test,

document.getElementById media di circa 35ms (fluttuante da 25ms fino a 52ms su circa 15 runs)

D'altra parte, il

jQuery media circa 200 ms (da 181ms a 222ms su circa 15 runs).

Da questo semplice test è possibile vedere che il jQuery ha richiesto circa 6 volte per il tempo.

Naturalmente, questo è più di 10000 iterazioni così in una situazione più semplice avrei probabilmente usare jQuery per facilità d'uso e tutte le altre cose interessanti come .animate e .fadeTo. Ma sì, tecnicamente getElementById è un po 'più veloce .

Answer 11

Ho sviluppato un database noSQL per la memorizzazione di alberi DOM in Web Browser in cui i riferimenti a tutti gli elementi DOM sulla pagina sono memorizzati in un indice breve. Quindi la funzione "getElementById()" non è necessaria per ottenere/modificare un elemento. Quando gli elementi dell'albero DOM vengono istanziati sulla pagina, il database assegna le chiavi primarie surrogate a ciascun elemento. È uno strumento gratuito http://js2dx.com