document.getElementById vs jQuery $ ()

È questo:

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

Lo stesso di questo:

 var contents = $('#contents'); 

Dato che jQuery è caricato?

Non esattamente!!

 document.getElementById('contents'); //returns a HTML DOM Object var contents = $('#contents'); //returns a jQuery Object 

In jQuery, per ottenere lo stesso risultato di document.getElementById , puoi accedere all’object jQuery e ottenere il primo elemento nell’object (Ricorda che gli oggetti JavaScript agiscono in modo simile agli array associativi).

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

No.

Calling document.getElementById('id') restituirà un object DOM non elaborato.

Chiamando $('#id') restituirà un object jQuery che avvolge l’object DOM e fornisce i metodi jQuery.

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

Puoi anche scrivere $(document.getElementById('id')) , che restituirà un object jQuery ed è equivalente a $('#id') .

È ansible ottenere l’object DOM sottostante da un object jQuery scrivendo $('#id')[0] .

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

L’equivalente sarebbe questo

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

o questo

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

Questi estrarranno l’elemento dall’object jQuery.

Una nota sulla differenza di velocità. Albind 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)); } 

Alternare commentando uno e poi commentare l'altro. Nei miei test,

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

D'altra parte, il

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

Da questo semplice test puoi vedere che jQuery ha impiegato circa 6 volte di più.

Ovviamente, questo è più di 10000 iterazioni quindi in una situazione più semplice probabilmente userò il jQuery per la facilità d'uso e tutte le altre cose interessanti come .animate e .fadeTo . Ma sì, tecnicamente getElementById è un po ' più veloce .

No. Il primo restituisce un elemento DOM, o null, mentre il secondo restituisce sempre un object jQuery. L’object jQuery sarà vuoto se nessun elemento con l’ID del contents stato abbinato.

L’elemento DOM restituito da document.getElementById('contents') ti permette di fare cose come cambiare il file .innerHTML (o .value ) ecc, tuttavia dovrai usare i metodi jQuery .value jQuery.

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

È più equivoco, tuttavia se nessun elemento con l’id del contents è abbinato, document.getElementById('contents') restituirà null, ma $('#contents').get(0) restituirà undefined.

Un vantaggio nell’utilizzo dell’object jQuery è che non si otterranno errori se non viene restituito alcun elemento, poiché viene sempre restituito un object. Tuttavia, se si tenta di eseguire operazioni sul valore restituito da document.getElementById si otterranno degli errori

No, in realtà lo stesso risultato sarebbe:

 $('#contents')[0] 

jQuery non sa quanti risultati verrebbero restituiti dalla query. Quello che ottieni è un object jQuery speciale che è una raccolta di tutti i controlli che corrispondono alla query.

Una parte di ciò che rende jQuery così conveniente è che i metodi MOST chiamati su questo object che sembrano essere pensati per un controllo, sono in realtà in un ciclo chiamato su tutti i membri della collezione.

Quando si utilizza la syntax [0] si prende il primo elemento dalla raccolta interna. A questo punto ottieni un object DOM

Nel caso in cui qualcun altro lo colpisca … Ecco un’altra differenza:

Se l’id contiene caratteri non supportati dallo standard HTML (vedi domanda SO qui ), jQuery potrebbe non trovarlo anche se getElementById lo fa.

Mi è successo 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 usando:

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

Proprio come la maggior parte delle persone ha detto, la differenza principale è il fatto che è racchiuso in un object jQuery con la chiamata jQuery vs l’object DOM raw usando il diritto JavaScript. L’object 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.

Un’altra differenza: getElementById restituisce la prima corrispondenza, mentre $('#...') restituisce una raccolta di corrispondenze – 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 seguente codice, document.getElementById('content') restituirà l’intero corpo ma $('form #content')[0] restituirà all’interno del modulo.

  

Header!

My Form

Potrebbe sembrare strano utilizzare ID duplicati, ma se si utilizza qualcosa come WordPress, un modello o un plugin potrebbero utilizzare lo stesso id che si utilizza nel contenuto. La selettività di jQuery potrebbe aiutarti.

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

var contents = $('#contents');

I frammenti di codice non sono gli stessi. il primo restituisce un object Element ( fonte ). Il secondo, equivalente a jQuery restituirà un object jQuery contenente una raccolta di zero o un elemento DOM. ( documentazione di jQuery ). 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.


Durante il controllo del progetto github per jQuery ho trovato i seguenti snippet di riga che sembra utilizzare i codici document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js line 68 in poi)

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

Ho sviluppato un database noSQL per la memorizzazione degli alberi DOM nei browser Web 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