document.getElementById vs jQuery $ ()

620

Ist das:

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

Das gleiche wie das:

var contents = $('#contents');

Angesichts der Tatsache, dass jQuery geladen ist?

Phillip Senn
quelle
10
Zusätzlich zu den in den Antworten angesprochenen Punkten ist die jQuery-Version eine App. 100x langsamer.
8
ist das irgendwo bewiesen?
FranBran
12
@torazaburo Tatsächlich ist die jQuery-Version nicht einmal dreimal langsamer (zumindest spätestens in Chrome). Siehe: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski
2
@ MichałPerłakowski in diesem Link ist die jquery-Version 10 mal langsamer. 26mil vs 2,4mil
Claudiu Creanga
1
Der korrekte aktualisierte Link für JSPerf lautet: jsperf.com/getelementbyid-vs-jquery-id In meinem Fall (FF 58) ist er 1000-mal langsamer. Auf jeden Fall führt jQuery immer noch 2,5 Millionen Operationen pro Sekunde aus. Im Allgemeinen ist das kein Problem, und es kann sicherlich nicht in Bezug auf die Funktionalität verglichen werden.
Diego Jancic

Antworten:

1017

Nicht genau!!

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

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

In jQuery document.getElementByIdkönnen Sie auf das jQuery-Objekt zugreifen und das erste Element im Objekt abrufen, um das gleiche Ergebnis wie zu erhalten (JavaScript-Objekte verhalten sich ähnlich wie assoziative Arrays).

var contents = $('#contents')[0]; //returns a HTML DOM Object
John Hartsock
quelle
24
Für alle Interessierten document.getElementByfunktioniert <IE8 nicht richtig. Es erhält auch Elemente, namedaher könnte man theoretisch argumentieren, dass dies document.getElementByIdnicht nur irreführend ist, sondern auch falsche Werte zurückgeben kann. Ich denke, @John ist neu, aber ich dachte, es würde nicht schaden, es hinzuzufügen.
Lime
14
Seien Sie vorsichtig, wenn Ihre Kennung nicht festgelegt ist. $('#'+id)[0]ist nicht gleich, document.getElementById(id)weil idmöglicherweise Zeichen enthalten, die in jQuery speziell behandelt werden!
Jakob
1
Das war sehr hilfreich - wusste das nie! Ich bin mir aber sicher, dass ich es schon einmal benutzt habe, was mich verblüfft. Hey, du lernst jeden Tag etwas! Vielen Dank!
jedd.ahyoung
3
Google jquery equivalent of document.getelementbyidund das erste Ergebnis ist dieser Beitrag. Vielen Dank!!!
Ajakblackgoat
$('#contents')[0].idGibt den ID-Namen zurück.
Omar
139

Nein.

Beim Aufruf document.getElementById('id')wird ein unformatiertes DOM-Objekt zurückgegeben.

Beim Aufruf $('#id')wird ein jQuery-Objekt zurückgegeben, das das DOM-Objekt umschließt und jQuery-Methoden bereitstellt.

Daher können Sie nur jQuery-Methoden wie css()oder während animate()des $()Aufrufs aufrufen.

Sie können auch schreiben $(document.getElementById('id')), was ein jQuery-Objekt zurückgibt und äquivalent zu ist $('#id').

Sie können das zugrunde liegende DOM-Objekt durch Schreiben aus einem jQuery-Objekt abrufen $('#id')[0].

SLaks
quelle
4
Wissen Sie zufällig, welches schneller ist - $ (document.getElementById ('element')) vs $ ('# element')?
Ivan Ivković
10
@ IvanIvković: Der erste ist schneller, da er kein String-Parsing beinhaltet.
SLaks
1
@SLaks Was ist der Hauptunterschied zwischen dem Raw-DOM-Objekt und dem jQuery-Objekt? Nur dass wir mit dem jQuery-Objekt jQuery-Methoden anwenden können?
Roxy'Pro
@ Roxy'Pro: Das sind verschiedene Objekte. jQuery-Objekte umschließen DOM-Objekte. Siehe die Dokumentation.
SLaks
Dieses Dokument JavaScript DOM Objects vs. jQuery Objects sieht nützlich aus. 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

Nah dran, aber nicht dasselbe. Sie erhalten dasselbe Element, aber die jQuery-Version ist in ein jQuery-Objekt eingeschlossen.

Das Äquivalent wäre dies

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

oder dieses

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

Diese ziehen das Element aus dem jQuery-Objekt.

RightSaidFred
quelle
29

Ein Hinweis zum Geschwindigkeitsunterschied. Fügen Sie einem Onclick-Aufruf das folgende Snipet hinzu:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

Abwechselnd einen auskommentieren und dann den anderen auskommentieren. In meinen Tests

document.getElementbyId durchschnittlich etwa 35 ms (schwankend von 25msbis zu 52msungefähr 15 runs)

Auf der anderen Seite die

jQuery war durchschnittlich etwa 200 ms lang (von 181msbis 222msungefähr 15 runs).

An diesem einfachen Test können Sie erkennen, dass die jQuery ungefähr sechsmal so lange gedauert hat .

Das ist natürlich über die 10000Iterationen hinaus, also würde ich in einer einfacheren Situation wahrscheinlich die jQuery verwenden, um die Verwendung zu vereinfachen und all die anderen coolen Dinge wie .animateund .fadeTo. Aber ja, technisch getElementByIdist es ziemlich viel schneller .

Nurdyguy
quelle
Vielen Dank für diese Antwort. Ich wollte fragen, sollte ich ersetzen alle $('#someID') mit document.getElementById("someID") ? Ich arbeite an etwas, das ich ausgiebig verwendet habe, $('#someID')und meine Seite läuft langsam für große Dateieingaben. Bitte schlagen Sie mir vor, was mein Umzug sein soll.
Mazhar MIK
Wenn Sie dasselbe mehrmals im selben Bereich var $myId = $('#myId');wiederverwenden, speichern Sie es wie die gespeicherte Variable und verwenden Sie sie erneut $myId. Das Finden anhand der ID ist im Allgemeinen ziemlich schnell. Wenn die Seite also träge ist, gibt es wahrscheinlich einen anderen Grund.
Nurdyguy
Danke @nurdyguy. Das war hilfreich. Ich werde versuchen, das umzusetzen.
Mazhar MIK
17

Nein. Das erste gibt ein DOM-Element oder null zurück, während das zweite immer ein jQuery-Objekt zurückgibt. Das jQuery-Objekt ist leer, wenn kein Element mit der ID von contentsübereinstimmt.

Mit dem von zurückgegebenen DOM-Element document.getElementById('contents')können Sie beispielsweise .innerHTML(oder .value) usw. ändern. Sie müssen jedoch jQuery-Methoden für das jQuery-Objekt verwenden.

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

Ist gleichwertiger, gibt jedoch, wenn kein Element mit der ID von contentsübereinstimmt, document.getElementById('contents')null zurück, gibt jedoch $('#contents').get(0)undefiniert zurück.

Ein Vorteil bei der Verwendung des jQuery-Objekts besteht darin, dass Sie keine Fehler erhalten, wenn keine Elemente zurückgegeben wurden, da ein Objekt immer zurückgegeben wird. Sie erhalten jedoch Fehler, wenn Sie versuchen, Vorgänge für das nullzurückgegebene von auszuführendocument.getElementById

Matt
quelle
15

Nein, eigentlich wäre das gleiche Ergebnis:

$('#contents')[0] 

jQuery weiß nicht, wie viele Ergebnisse von der Abfrage zurückgegeben würden. Was Sie zurückerhalten, ist ein spezielles jQuery-Objekt, das eine Sammlung aller Steuerelemente ist, die mit der Abfrage übereinstimmen.

Ein Teil dessen, was jQuery so praktisch macht, ist, dass sich die meisten für dieses Objekt aufgerufenen Methoden, die so aussehen, als wären sie für ein Steuerelement bestimmt, tatsächlich in einer Schleife befinden, die für alle Mitglieder in der Sammlung aufgerufen wird

Wenn Sie die Syntax [0] verwenden, nehmen Sie das erste Element aus der inneren Sammlung. Zu diesem Zeitpunkt erhalten Sie ein DOM-Objekt

Andrey
quelle
10

Für den Fall, dass jemand anderes dies trifft ... Hier ist ein weiterer Unterschied:

Wenn die ID Zeichen enthält, die vom HTML-Standard nicht unterstützt werden (siehe SO-Frage hier ), findet jQuery sie möglicherweise nicht, selbst wenn getElementById dies tut.

Dies geschah mir mit einer ID, die "/" Zeichen enthielt (z. B. id = "a / b / c"), unter Verwendung von Chrome:

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

konnte mein Element finden aber:

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

nicht.

Übrigens bestand die einfache Lösung darin, diese ID in das Namensfeld zu verschieben. JQuery hatte keine Probleme, das Element mit folgenden Elementen zu finden:

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

Wie die meisten Leute gesagt haben, besteht der Hauptunterschied darin, dass es mit dem jQuery-Aufruf in ein jQuery-Objekt eingeschlossen wird, während das reine DOM-Objekt mit reinem JavaScript verwendet wird. Das jQuery-Objekt kann natürlich andere jQuery-Funktionen damit ausführen. Wenn Sie jedoch nur einfache DOM-Manipulationen wie das grundlegende Styling oder die grundlegende Ereignisbehandlung durchführen müssen, ist die direkte JavaScript-Methode immer ein bisschen schneller als jQuery, da Sie dies nicht tun. Sie müssen keine externe Codebibliothek laden, die auf JavaScript basiert. Das spart einen zusätzlichen Schritt.

Kobby
quelle
5

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

var contents = $('#contents');

Die Codefragmente sind nicht gleich. Zuerst gibt man ein ElementObjekt ( Quelle ) zurück. Das zweite, jQuery-Äquivalent, gibt ein jQuery-Objekt zurück, das eine Sammlung von entweder null oder einem DOM-Element enthält. ( jQuery-Dokumentation ). Intern verwendet jQuery document.getElementById()für Effizienz.

In beiden Fällen wird nur das erste Element zurückgegeben, wenn mehr als ein Element gefunden wurde.


Beim Überprüfen des Github-Projekts auf jQuery habe ich folgende Zeilenausschnitte gefunden, die anscheinend document.getElementById-Codes verwenden ( https://github.com/jquery/jquery/blob/master/src/core/init.js Zeile 68).

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

Ein weiterer Unterschied: getElementByIdGibt die erste Übereinstimmung zurück, während $('#...')eine Sammlung von Übereinstimmungen zurückgegeben wird. Ja, dieselbe ID kann in einem HTML-Dokument wiederholt werden.

Ferner getElementIdwird aus dem Dokument aufgerufen, während $('#...')von einem Selektor aufgerufen werden kann. Im folgenden Code document.getElementById('content')wird also der gesamte Körper zurückgegeben, jedoch $('form #content')[0]innerhalb des Formulars.

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

Es mag seltsam erscheinen, doppelte IDs zu verwenden, aber wenn Sie etwas wie Wordpress verwenden, verwendet eine Vorlage oder ein Plugin möglicherweise dieselbe ID, die Sie im Inhalt verwenden. Die Selektivität von jQuery könnte Ihnen dabei helfen.

Steve Banks
quelle
2

jQuery basiert auf JavaScript. Dies bedeutet, dass es sowieso nur Javascript ist.

document.getElementById ()

Die Methode document.getElementById () gibt das Element zurück, das das ID-Attribut mit dem angegebenen Wert hat, und gibt null zurück, wenn keine Elemente mit der angegebenen ID vorhanden sind. Eine ID sollte innerhalb einer Seite eindeutig sein.

Jquery $ ()

Wenn Sie jQuery () oder $ () mit einem ID-Selektor als Argument aufrufen, wird ein jQuery-Objekt zurückgegeben, das eine Auflistung von entweder null oder einem DOM-Element enthält. Jeder ID-Wert darf nur einmal in einem Dokument verwendet werden. Wenn mehr als einem Element dieselbe ID zugewiesen wurde, wählen Abfragen, die diese ID verwenden, nur das erste übereinstimmende Element im DOM aus.

Hadi Mir
quelle
1

Ich habe eine noSQL-Datenbank zum Speichern von DOM-Bäumen in Webbrowsern entwickelt, in der Verweise auf alle DOM-Elemente auf der Seite in einem kurzen Index gespeichert sind. Daher wird die Funktion "getElementById ()" nicht benötigt, um ein Element abzurufen / zu ändern. Wenn Elemente im DOM-Baum auf einer Seite instanziiert werden, weist die Datenbank jedem Element Ersatzprimärschlüssel zu. Es ist ein kostenloses Tool http://js2dx.com

Gonki
quelle
1

Alle obigen Antworten sind korrekt. Wenn Sie es in Aktion sehen möchten, vergessen Sie nicht, dass Sie Console in einem Browser haben, in dem Sie das tatsächliche Ergebnis kristallklar sehen können:

Ich habe ein HTML:

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

Gehen Sie zur Konsole (cntrl+shift+c)und verwenden Sie diese Befehle, um Ihr Ergebnis klar zu sehen

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

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

Wie wir sehen können, haben wir im ersten Fall das Tag selbst erhalten (das ist genau genommen ein HTMLDivElement-Objekt). In letzterem haben wir eigentlich kein einfaches Objekt, sondern eine Reihe von Objekten. Und wie in anderen Antworten oben erwähnt, können Sie den folgenden Befehl verwenden:

$('#contents')[0]
>>> div#contents
Mazhar MIK
quelle
1

Alle Antworten sind heute ab 2019 alt. Sie können direkt auf ID-Schlüssel in Javascript zugreifen. Probieren Sie es einfach aus

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

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

frank-dspeed
quelle