document.getElementById vs jQuery $ ()

Czy to jest:

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

Tak samo jak to:

var contents = $('#contents');

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

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

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

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.

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 .

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

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

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']);

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.

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] );

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.

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.

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

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

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