document.getElementById vs jQuery $ ()

620

Czy to jest:

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

Tak samo jak to:

var contents = $('#contents');

Biorąc pod uwagę, że jQuery jest załadowany?

Phillip Senn
źródło
10
Oprócz kwestii poruszonych w odpowiedziach, wersja jQuery to aplikacja. 100x wolniej.
8
czy gdzieś to udowodniono?
FranBran
12
@torazaburo W rzeczywistości wersja jQuery nie jest nawet 3 razy wolniejsza (przynajmniej w najnowszym Chrome). Zobacz: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski
2
@ MichałPłłakowski w tym linku wersja jquery jest 10 razy wolniejsza. 26 mil vs 2,4 mil
Claudiu Creanga
1
Poprawny zaktualizowany link do JSPerf to: jsperf.com/getelementbyid-vs-jquery-id W moim przypadku (FF 58) jest 1000 razy wolniejszy. W każdym razie jQuery wykonuje 2,5 miliona operacji na sekundę. Zasadniczo nie stanowi to problemu i na pewno nie można go porównać pod względem funkcjonalności.
Diego Jancic,

Odpowiedzi:

1017

Nie dokładnie!!

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

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

W jQuery, aby uzyskać ten sam wynik document.getElementById, możesz uzyskać dostęp do obiektu jQuery i uzyskać pierwszy element w tym obiekcie (pamiętaj, że obiekty JavaScript działają podobnie jak tablice asocjacyjne).

var contents = $('#contents')[0]; //returns a HTML DOM Object
John Hartsock
źródło
24
Dla każdego zainteresowanego document.getElementBynie działa poprawnie w <IE8. Dostaje również elementy, namedlatego teoretycznie można argumentować, że document.getElementByIdjest nie tylko mylący, ale może zwracać nieprawidłowe wartości. Myślę, że @John nowy to, ale myślałem, że dodanie go nie zaszkodzi.
Lime
14
Uważaj, jeśli twój identyfikator nie jest ustalony. $('#'+id)[0]nie jest równy, document.getElementById(id)ponieważ idmoże zawierać znaki traktowane specjalnie w jQuery!
Jakob
1
To było bardzo pomocne - nigdy o tym nie wiedziałem! Jestem pewien, że już go użyłem , co mnie zaskakuje. Hej, uczysz się czegoś każdego dnia! Dzięki!
jedd.ahyoung
3
google, jquery equivalent of document.getelementbyida pierwszym wynikiem jest ten post. Dziękuję Ci!!!
ajakblackgoat
$('#contents')[0].idzwraca nazwę id.
Omar
139

Nie.

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

Wywołanie $('#id')zwróci obiekt jQuery, który otacza obiekt DOM i zapewnia metody jQuery.

Dlatego możesz wywoływać tylko metody jQuery, takie jak css()lub animate()podczas $()wywołania.

Możesz także napisać $(document.getElementById('id')), który zwróci obiekt jQuery i jest równoważny z $('#id').

Bazowy obiekt DOM można uzyskać z obiektu jQuery, pisząc $('#id')[0].

SLaks
źródło
4
Czy zdarza ci się wiedzieć, który z nich jest szybszy - $ (document.getElementById ('element')) vs $ ('# element')?
Ivan Ivković
10
@ IvanIvković: Pierwszy jest szybszy, ponieważ nie wymaga analizowania łańcucha.
SLaks,
1
@SLaks Jaka jest główna różnica między surowym obiektem DOM a obiektem jQuery? Czy za pomocą obiektu jQuery mamy możliwość zastosowania metod jQuery?
Roxy'Pro
@ Roxy'Pro: To różne obiekty. Obiekty jQuery zawijają obiekty DOM. Zobacz dokumentację.
SLaks
Ten dokument JavaScript DOM Objects vs. jQuery Objects wydaje się przydatny. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439,
31

Blisko, ale nie to samo. Otrzymują ten sam element, ale wersja jQuery jest opakowana w obiekt jQuery.

Odpowiednikiem byłoby to

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

albo to

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

Wyciągną one element z obiektu jQuery.

RightSaidFred
źródło
29

Uwaga na temat różnicy prędkości. Dołącz następujący fragment kodu do wywołania 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));
}

Alternatywnie komentowanie jednego, a następnie komentowanie drugiego. W moich testach

document.getElementbyId średnio około 35 ms (waha się od 25msokoło do 52msokoło 15 runs)

Z drugiej strony

Średnio jQuery wynosił około 200 ms (od około 181msdo 222msokoło 15 runs).

Z tego prostego testu widać, że jQuery zajęło około 6 razy dłużej.

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

nurdyguy
źródło
Dziękuję za tę odpowiedź. Chciałem zapytać, należy wymienić wszystkich $('#someID') z document.getElementById("someID") ? Pracuję nad czymś, z czego intensywnie korzystałem, $('#someID')a moja strona działa wolno w przypadku dużych plików. Proszę zasugeruj mi, jaki powinien być mój ruch.
Mazhar MIK
Jeśli ponownie używasz tego samego kilka razy w tym samym zakresie, zapisz go, polub var $myId = $('#myId');i ponownie użyj zapisanej zmiennej $myId. Wyszukiwanie według identyfikatora jest na ogół dość szybkie, więc jeśli strona jest powolna, prawdopodobnie istnieje inny powód.
nurdyguy
Dzięki @nurdyguy. To było pomocne. Spróbuję to zaimplementować.
Mazhar MIK,
17

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

Zwrócony przez DOM element document.getElementById('contents')pozwala na takie rzeczy, jak zmiana .innerHTML(lub .value) itp., Jednak będziesz musiał użyć metod jQuery na obiekcie jQuery.

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

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

Jedną z korzyści korzystania z obiektu jQuery jest to, że nie otrzymasz żadnych błędów, jeśli nie zostaną zwrócone żadne elementy, ponieważ obiekt jest zawsze zwracany. Jednak wystąpią błędy, jeśli spróbujesz wykonać operacje na nullzwróconym przezdocument.getElementById

Matt
źródło
15

Nie, w rzeczywistości ten 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 metody MOST wywoływane w tym obiekcie, które wyglądają tak, jakby były przeznaczone do jednej kontroli, są w rzeczywistości w pętli wywoływanej dla wszystkich elementów w kolekcji

Kiedy używasz składni [0], bierzesz pierwszy element z wewnętrznej kolekcji. W tym momencie otrzymujesz obiekt DOM

Andrey
źródło
10

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

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

Zdarzyło mi się to z identyfikatorem zawierającym znaki „/” (np. Id = „a / b / c”) przy użyciu Chrome:

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

udało mi się znaleźć mój element, ale:

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

nie.

Przy okazji, prostą poprawką było przeniesienie tego identyfikatora do pola nazwy. JQuery nie miał problemu ze znalezieniem elementu za pomocą:

var contents = $('.myclass[name='a/b/c']);
użytkownik1435666
źródło
5

Tak jak większość ludzi powiedziała, główna różnica polega na tym, że jest on zawinięty w obiekt jQuery za pomocą wywołania jQuery w porównaniu do surowego obiektu DOM przy użyciu prostego JavaScript. Obiekt jQuery będzie oczywiście mógł wykonywać z nim inne funkcje jQuery, ale jeśli potrzebujesz tylko prostej manipulacji DOM, takiej jak podstawowe stylizowanie lub podstawowa obsługa zdarzeń, prosta metoda JavaScript jest zawsze odrobinę szybsza niż jQuery, ponieważ nie „ trzeba załadować do zewnętrznej biblioteki kodu zbudowanej na JavaScript. Oszczędza to dodatkowy krok.

Kobby
źródło
5

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

var contents = $('#contents');

Fragmenty kodu nie są takie same. pierwszy zwraca Elementobiekt ( źródło ). Drugi, równoważnik jQuery, zwróci obiekt jQuery zawierający kolekcję zerowego lub jednego elementu DOM. ( dokumentacja jQuery ). Wewnętrznie jQuery korzysta document.getElementById()z wydajności.

W obu przypadkach, jeśli znaleziono więcej niż jeden element, zwracany jest tylko pierwszy element.


Podczas sprawdzania projektu github pod kątem jQuery znalazłem następujące fragmenty linii, które wydają się używać kodów document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js wiersz 68 i dalej)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );
Nipuna
źródło
4

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

Ponadto getElementIdjest wywoływany z dokumentu, natomiast $('#...')można go wywoływać z selektora. Tak więc w poniższym kodzie document.getElementById('content')zwróci całe ciało, ale $('form #content')[0]wróci do formularza.

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

Używanie zduplikowanych identyfikatorów może wydawać się dziwne, ale jeśli używasz czegoś takiego jak Wordpress, szablon lub wtyczka mogą używać tego samego identyfikatora, co w treści. Selektywność jQuery może ci w tym pomóc.

Steve Banks
źródło
2

jQuery jest oparty na JavaScript. Oznacza to, że i tak to tylko javascript.

document.getElementById ()

Metoda document.getElementById () zwraca element, który ma atrybut ID o określonej wartości, a Zwraca null, jeśli nie ma elementów o podanym identyfikatorze. Identyfikator powinien być unikalny na stronie.

Jquery $ ()

Wywołanie jQuery () lub $ () za pomocą selektora id jako argumentu zwróci obiekt jQuery zawierający kolekcję zerowego lub jednego elementu DOM. Każdej wartości id można użyć tylko raz w dokumencie. Jeśli więcej niż jeden element ma przypisany ten sam identyfikator, zapytania, które używają tego identyfikatora, wybiorą tylko pierwszy dopasowany element w DOM.

Hadi Mir
źródło
1

Opracowałem bazę danych noSQL do przechowywania drzew DOM w przeglądarkach internetowych, w których odniesienia do wszystkich elementów DOM na stronie są przechowywane w krótkim indeksie. Dlatego funkcja „getElementById ()” nie jest potrzebna do pobierania / modyfikowania elementu. Gdy elementy w drzewie DOM są tworzone na stronie, baza danych przypisuje zastępcze klucze podstawowe do każdego elementu. Jest to bezpłatne narzędzie http://js2dx.com

Gonki
źródło
1

Wszystkie powyższe odpowiedzi są poprawne. Jeśli chcesz zobaczyć to w akcji, nie zapomnij, że masz konsolę w przeglądarce, w której możesz zobaczyć krystalicznie czysty wynik:

Mam HTML:

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

Przejdź do konsoli (cntrl+shift+c)i użyj tych poleceń, aby wyraźnie zobaczyć swój wynik

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

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

Jak widać, w pierwszym przypadku otrzymaliśmy sam tag (ściśle mówiąc, obiekt HTMLDivElement). W tym ostatnim nie mamy właściwie zwykłego obiektu, ale tablicę obiektów. Jak wspomniano w innych odpowiedziach powyżej, możesz użyć następującego polecenia:

$('#contents')[0]
>>> div#contents
Mazhar MIK
źródło
1

Wszystkie odpowiedzi są dziś stare, od 2019 r. Możesz bezpośrednio uzyskać dostęp do fildów z kluczem id w javascript, po prostu spróbuj

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

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

frank-dspeed
źródło