Unterschied zwischen getElementById und jquery $(‘#smth’)

Lesezeit: 2 Minuten

Benutzer-Avatar
Andreas Kordampalos

Was ist der Unterschied zwischen klassischem Javascript-Code:

document.getElementById('theID')

und die jQuery-Version:

$('#theID')

  • Ich finde es toll, dass reguläres JS “klassisch” genannt wird.

    – Spanky

    23. Mai 2011 um 22:32 Uhr

  • @Spanky Ich denke, es muss ein neues Tag auf SO “classic-javascript” gestartet werden, da so viele Fragen gestellt werden, die eindeutig “kein jQuery” angeben, oder sie verweisen nicht einmal auf jQuery, und die Leute posten immer noch nur jQuery-Snippets, haha

    – Oscar Patensohn

    23. Mai 2011 um 22:35 Uhr

  • Wir fordern, den Fehler zu sehen 😀

    – Jhourlad Estrella

    10. Juli 2018 um 1:30 Uhr

document.getElementById gibt ein DOM-Objekt zurück. Dies ist die native Denkweise des Browsers über ein Element auf der Seite. Es hat verschiedene Methoden und Eigenschaften. Diese können etwas umständlich zu bedienen sein.

Das jQuery-Objekt (erstellt von der $ Methode) ist ein Wrapper um ein DOM-Element oder einen Satz von DOM-Elementen. Die normalen Eigenschaften und Methoden sind nicht verfügbar; Sie erhalten eine Auswahl verschiedener Methoden, die den Prozess der DOM-Manipulation intuitiver machen.

Der Unterschied ist bei mehreren Elementen in der Auswahl deutlicher zu sehen (wie Sie es mit einem Klassenselektor erhalten würden $('.someClass') zum Beispiel, aber die Methoden einer jQuery-Auswahl unterscheiden sich von denen eines nativen DOM-Elements. Sie weisen auf dasselbe hin, aber sie sind unterschiedliche Arten, darüber nachzudenken und damit umzugehen.


Als letzte Anmerkung können Sie eine jQuery-Auswahl mit der in ihre nativen DOM-Elemente konvertieren get Methode (edit: oder die alternative Array-ähnliche Syntax). So

document.getElementById('theID')

ist genau das gleiche wie

$('#theID').get(0) // or $('#theId')[0]

Beachten Sie jedoch, dass Sie das erste verwenden sollten, da es eine viel bessere Leistung bietet. Verwenden Sie jQuery nur, wenn Sie die zusätzlichen Funktionen benötigen, die es bietet.

  • Warum .get(0) Anstatt von [0] ?

    – Raynos

    23. Mai 2011 um 22:38 Uhr

  • @Raynos Explicitness … Ich habe die alternative Notation hinzugefügt.

    – einsamer Tag

    23. Mai 2011 um 22:41 Uhr

  • Danke für deine Hilfe, das ist die Antwort, die ich erwartet hätte. 🙂

    – Andreas Kordampalos

    23. Mai 2011 um 22:47 Uhr


  • Wie kann dasselbe Objekt von $ zurückgegeben werden, indem getElementById verwendet wird

    – Sunil Garg

    27. Dezember 2017 um 8:37 Uhr

Nun, in Ihrem zweiten Projekt haben Sie die jQuery-Dateien möglicherweise nicht ganz oben eingefügt.

  • Nein, die jQuery wurde korrekt verknüpft, der Fehler war alt, aber der verwendete Code ist document.getElementById(‘viewport’).scrollTop Wenn ich das getElement ändere, hat es nicht funktioniert …

    – Andreas Kordampalos

    23. Mai 2011 um 22:39 Uhr


Unbedingt einschließen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

In deiner <head>

Wenn Sie nicht laden jQuery dann kannst du nicht verwenden $ da jQuery eine externe Bibliothek und kein Teil von JavaScript ist.

Nicht ganz : Wenn ein Element mit dieser ID nicht auf der Seite vorhanden ist, funktioniert $(“#id”) nicht und das Skript stoppt document.getElementById(“id”) gibt null zurück

1175640cookie-checkUnterschied zwischen getElementById und jquery $(‘#smth’)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy