dokument.getElementById vs jQuery $()

Nie.

Wywołanie document.getElementById('id') zwróci surowy obiekt DOM.

Wywołanie $('#id') zwróci obiekt jQuery, który zawija obiekt DOM i udostępnia metody jQuery.

Tak więc, możesz wywoływać tylko metody jQuery, takie jak css() lub animate() na wywołaniu $().

Możesz również napisać $(document.getElementById('id')), który zwróci obiekt jQuery i jest odpowiednikiem $('#id').

Możesz uzyskać bazowy obiekt DOM z obiektu jQuery pisząc $('#id')[0].

Blisko, ale nie tak samo. Dostają ten sam element, ale wersja jQuery jest zawinięta w obiekt jQuery.

Odpowiednikiem byłoby to

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

Lub to

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

To wyciągnie element z obiektu jQuery.

Uwaga na różnicę prędkości. Dołącz poniższy wycinek do połączenia 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));
}

Naprzemiennie komentuje jeden, a następnie komentuje drugi. W moich testach,

Dokument.getElementbyId o 35ms (wahania od 25ms do 52ms na około 15 runs)

Z drugiej strony

JQuery średnio około 200ms (od 181ms do 222ms na około 15 runs).

Z tego prosty test widać, że jQuery zajęło około 6 razy tyle czasu.

Oczywiście to już koniec 10000 iteracji, więc w prostszej sytuacji prawdopodobnie użyłbym jQuery dla łatwości użycia i wszystkich innych fajnych rzeczy, takich jak .animate i .fadeTo. Ale tak, technicznie getElementById jest trochę szybszy .

Nie. Pierwszy zwraca element DOM lub null, podczas gdy drugi zawsze zwraca obiekt jQuery. Obiekt jQuery będzie pusty, jeśli żaden element o id contents nie został dopasowany.

Element DOM zwracany przez document.getElementById('contents') pozwala na takie rzeczy jak zmiana .innerHTML (lub .value) itd., jednak musisz użyć metod jQuery w obiekcie jQuery.

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

Jest bardziej równomierne, jednak jeśli żaden element o id contents nie jest dopasowany, document.getElementById('contents') zwróci null, ale $('#contents').get(0) zwróci undefined.

Jedną z zalet korzystania z obiektu jQuery jest to, że nie pojawią się żadne błędy, jeśli nie zostaną zwrócone żadne elementy, ponieważ obiekt jest zawsze zwracany. Jednak pojawią się błędy, jeśli spróbujesz wykonać operacje na null zwróconym przez document.getElementById

Nie, właściwie taki sam wynik byłby:

$('#contents')[0] 

JQuery nie wie, ile wyników zostanie zwróconych z zapytania. To, co otrzymujesz, to specjalny obiekt jQuery, który jest zbiorem wszystkich kontrolek pasujących do zapytania.

Częścią tego, co sprawia, że jQuery jest tak wygodne, jest to, że większość metod wywołanych na tym obiekcie, które wyglądają tak, jakby były przeznaczone do jednej kontroli, są w rzeczywistości w pętli wywołanej na wszystkich elementach int on collection

Kiedy używasz składni [0] weź pierwszy element z kolekcji wewnętrznej. W tym momencie otrzymasz obiekt DOM

Na wypadek, gdyby ktoś inny uderzył w to... Oto kolejna różnica:

Jeśli id zawiera znaki, które nie są obsługiwane przez standard HTML (patrz pytanie tutaj), to jQuery może go nie znaleźć, nawet jeśli getElementById tak.

Przydarzyło mi się to z id zawierającym znaki " / " (np. id="A/b/c"), używając Chrome:

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

Był w stanie znaleźć mój element, ale:

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

Btw, prostą poprawką było przeniesienie tego id do pola Nazwa. JQuery nie miał problemów ze znalezieniem elementu za pomocą:

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

Tak jak większość ludzi powiedziała, główną różnicą jest fakt, że jest on zawinięty w obiekt jQuery z wywołaniem jQuery vs surowy obiekt DOM przy użyciu prostego JavaScript. Obiekt jQuery będzie mógł oczywiście wykonywać inne funkcje jQuery, ale jeśli musisz wykonać prostą manipulację domową, taką jak podstawowa stylizacja lub Podstawowa obsługa zdarzeń, prosta metoda JavaScript jest zawsze nieco szybsza niż jQuery, ponieważ nie musisz ładować zewnętrznej biblioteki kodu zbudowanej na JavaScript. To oszczędza dodatkowy krok.

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

var contents = $('#contents');

Fragmenty kodu nie są takie same. pierwszy zwraca Element object (source ). Drugi, odpowiednik jQuery zwróci obiekt jQuery zawierający kolekcję zero lub jeden element DOM. (jQuery documentation ). Wewnętrznie jQuery używa document.getElementById() do wydajności.

W obu przypadkach, jeśli znaleziono więcej niż jeden element, zostanie zwrócony tylko pierwszy element.

Podczas sprawdzania projektu github dla jQuery Znalazłem następujące fragmenty linii, które wydają się używać dokumentu.kody getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js linia 68 dalej)

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

Jeszcze jedna różnica: getElementById zwraca pierwsze dopasowanie , podczas gdy $('#...') zwraca kolekcję dopasowań - tak, ten sam ID można powtórzyć w dokumencie HTML.

Dalej, {[3] } jest wywoływana z dokumentu, podczas gdy {[2] } może być wywoływana z selektora. W poniższym kodzie document.getElementById('content') zwróci całe ciało, ale $('form #content')[0] zwróci wewnątrz formularza.

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

Używanie duplikatów identyfikatorów może wydawać się dziwne, ale jeśli używasz czegoś takiego jak Wordpress, Szablon lub wtyczka mogą użyj tego samego identyfikatora, którego używasz w treści. Selektywność jQuery może Ci pomóc.

Opracowałem bazę danych noSQL do przechowywania drzew DOM w przeglądarkach internetowych, gdzie odniesienia do wszystkich elementów DOM na stronie są przechowywane w krótkim indeksie. Dlatego funkcja" getElementById () " nie jest potrzebna do uzyskania/modyfikacji elementu. Gdy elementy w drzewie DOM są tworzone na stronie, baza danych przydziela każdemu elementowi zastępcze klucze podstawowe. Jest to darmowe narzędzie http://js2dx.com