Ist das:
var contents = document.getElementById('contents');
Das gleiche wie das:
var contents = $('#contents');
Angesichts der Tatsache, dass jQuery geladen ist?
javascript
jquery
jquery-selectors
Phillip Senn
quelle
quelle
Antworten:
Nicht genau!!
In jQuery
document.getElementById
kö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).quelle
document.getElementBy
funktioniert <IE8 nicht richtig. Es erhält auch Elemente,name
daher könnte man theoretisch argumentieren, dass diesdocument.getElementById
nicht 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.$('#'+id)[0]
ist nicht gleich,document.getElementById(id)
weilid
möglicherweise Zeichen enthalten, die in jQuery speziell behandelt werden!jquery equivalent of document.getelementbyid
und das erste Ergebnis ist dieser Beitrag. Vielen Dank!!!$('#contents')[0].id
Gibt den ID-Namen zurück.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ährendanimate()
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]
.quelle
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.
Nah dran, aber nicht dasselbe. Sie erhalten dasselbe Element, aber die jQuery-Version ist in ein jQuery-Objekt eingeschlossen.
Das Äquivalent wäre dies
oder dieses
Diese ziehen das Element aus dem jQuery-Objekt.
quelle
Ein Hinweis zum Geschwindigkeitsunterschied. Fügen Sie einem Onclick-Aufruf das folgende Snipet hinzu:
Abwechselnd einen auskommentieren und dann den anderen auskommentieren. In meinen Tests
Auf der anderen Seite die
Das ist natürlich über die
10000
Iterationen 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.animate
und.fadeTo
. Aber ja, technischgetElementById
ist es ziemlich viel schneller .quelle
$('#someID')
mitdocument.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.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.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.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
null
zurückgegebene von auszuführendocument.getElementById
quelle
Nein, eigentlich wäre das gleiche Ergebnis:
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
quelle
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:
konnte mein Element finden aber:
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:
quelle
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.
quelle
var contents = document.getElementById('contents');
var contents = $('#contents');
Die Codefragmente sind nicht gleich. Zuerst gibt man ein
Element
Objekt ( 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 jQuerydocument.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).
quelle
Ein weiterer Unterschied:
getElementById
Gibt 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
getElementId
wird aus dem Dokument aufgerufen, während$('#...')
von einem Selektor aufgerufen werden kann. Im folgenden Codedocument.getElementById('content')
wird also der gesamte Körper zurückgegeben, jedoch$('form #content')[0]
innerhalb des Formulars.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.
quelle
jQuery basiert auf JavaScript. Dies bedeutet, dass es sowieso nur Javascript ist.
document.getElementById ()
Jquery $ ()
quelle
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
quelle
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:
Gehen Sie zur Konsole
(cntrl+shift+c)
und verwenden Sie diese Befehle, um Ihr Ergebnis klar zu sehenWie 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:
quelle
Alle Antworten sind heute ab 2019 alt. Sie können direkt auf ID-Schlüssel in Javascript zugreifen. Probieren Sie es einfach aus
Online Demo! - https://codepen.io/frank-dspeed/pen/mdywbre
quelle