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 document.getElementById, è possibile accedere all'oggetto jQuery e ottenere il primo elemento nell'oggetto (Ricorda che gli oggetti JavaScript agiscono in modo simile agli array associativi).

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

No.

La chiamata document.getElementById('id')restituirà un oggetto DOM non elaborato.

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

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

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

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

L'equivalente sarebbe questo

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

o questo

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

Questi estrarranno l'elemento dall'oggetto jQuery.

Una nota sulla differenza di velocità. Allega 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 fuori e poi commentando l'altro fuori. Nei miei test,

document.getElementbyId ha una media di circa 35ms (fluttuando da 25mssu a 52mscirca 15 runs)

D'altra parte, il

jQuery ha una media di circa 200ms (che vanno da 181msa 222mscirca circa 15 runs).

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

Ovviamente, è finita le 10000iterazioni, quindi in una situazione più semplice probabilmente userei jQuery per facilità d'uso e tutte le altre cose interessanti come .animatee .fadeTo. Ma sì, tecnicamente getElementByIdè un po ' più veloce .

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 è contentsstato trovato.

L'elemento DOM restituito document.getElementById('contents')ti consente di fare cose come cambiare .innerHTML(o .value) ecc. Tuttavia, dovrai usare i metodi jQuery sull'oggetto jQuery.

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

È più equivoco, tuttavia se nessun elemento con l'id di contentsviene associato, document.getElementById('contents')restituirà null, ma $('#contents').get(0)restituirà indefinito.

Un vantaggio sull'uso dell'oggetto jQuery è che non si otterranno errori se non vengono restituiti elementi, poiché viene sempre restituito un oggetto. Tuttavia, si verificheranno errori se si tenta di eseguire operazioni sul nullreso dadocument.getElementById

No, in realtà lo stesso risultato sarebbe:

$('#contents')[0] 

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

Parte di ciò che rende jQuery così conveniente è che la maggior parte dei metodi chiamati su questo oggetto che sembrano pensati per un controllo, sono in realtà in un ciclo chiamato su tutti i membri della raccolta

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

Nel caso in cui qualcun altro lo colpisca ... Ecco un'altra differenza:

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

Questo mi è successo con un id contenente "/" caratteri (es: id = "a / b / c"), usando 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 oggetto jQuery con la chiamata jQuery rispetto all'oggetto DOM non elaborato utilizzando JavaScript diretto. L'oggetto jQuery sarà in grado di fare altre funzioni jQuery con esso ovviamente, ma, se hai solo bisogno di fare semplici manipolazioni DOM come lo stile di base o la gestione di eventi di base, il metodo JavaScript diretto è sempre un po 'più veloce di jQuery poiché non devo caricare in una libreria esterna di codice costruita su JavaScript. Salva un ulteriore passo.

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

var contents = $('#contents');

Gli snippet di codice non sono gli stessi. il primo restituisce un Elementoggetto ( sorgente ). Il secondo, l'equivalente di jQuery restituirà un oggetto jQuery contenente una raccolta di zero o un elemento DOM. ( documentazione jQuery ). Internamente jQuery utilizza document.getElementById()per 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 frammenti di riga che sembrano utilizzare i codici document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js dalla riga 68 in poi)

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

Un'altra differenza: getElementByIdrestituisce la prima corrispondenza, mentre $('#...')restituisce una raccolta di corrispondenze: sì, lo stesso ID può essere ripetuto in un documento HTML.

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

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

Potrebbe sembrare strano usare ID duplicati, ma se stai usando qualcosa come Wordpress, un modello o un plugin potrebbe usare lo stesso ID che usi nel contenuto. La selettività di jQuery potrebbe aiutarti.

jQuery è basato su JavaScript. Ciò significa che è comunque solo javascript.

document.getElementById ()

Il metodo document.getElementById () restituisce l'elemento che ha l'attributo ID con il valore specificato e restituisce null se non esiste alcun elemento con l'ID specificato. Un ID deve essere univoco all'interno di una pagina.

Jquery $ ()

La chiamata di jQuery () o $ () con un selettore ID come argomento restituirà un oggetto jQuery contenente una raccolta di zero o un elemento DOM. Ogni valore ID deve essere utilizzato una sola volta all'interno di un documento. Se a più di un elemento è stato assegnato lo stesso ID, le query che utilizzano tale ID selezioneranno solo il primo elemento corrispondente nel DOM.

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

Tutte le risposte sopra sono corrette. Se vuoi vederlo in azione, non dimenticare di avere Console in un browser in cui puoi vedere il risultato effettivo in modo chiaro:

Ho un HTML:

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

Vai alla console (cntrl+shift+c)e usa questi comandi per vedere chiaramente il tuo risultato

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

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

Come possiamo vedere, nel primo caso abbiamo ottenuto il tag stesso (ovvero, in senso stretto, un oggetto HTMLDivElement). In quest'ultimo caso in realtà non abbiamo un oggetto semplice, ma una matrice di oggetti. E come menzionato da altre risposte sopra, puoi usare il seguente comando:

$('#contents')[0]
>>> div#contents

Tutte le risposte sono vecchie oggi dal 2019, puoi accedere direttamente a filds con ID chiave in JavaScript semplicemente provalo

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

Demo online! - https://codepen.io/frank-dspeed/pen/mdywbre