Was ist der Unterschied zwischen einem jQuery-Objekt und einem DOM-Element? Unterschied zwischen .get () und .index ()?

Die Methode get wird verwendet, um auf die DOM-Elemente innerhalb eines jQuery-Objekts zuzugreifen:

In diesem Beispiel ist allDivs ein Array, das alle übereinstimmenden Elemente enthält (in diesem Fall würde es jedes div -Element im DOM enthalten).

Die Methode index gibt eine Ganzzahl zurück, die die Position des ausgewählten Elements relativ zu seinen Geschwistern angibt. Betrachten Sie den folgenden HTML-Code:

Und die folgende jQuery:

Was Ihre andere Frage betrifft, ist ein DOM-Knoten so ziemlich alles im DOM. Elemente sind Knotenarten (Typ 1). Sie haben beispielsweise auch Textknoten (Typ 3). Ein Element ist so ziemlich jedes Tag.

Um das klarer zu machen, betrachten Sie den folgenden HTML-Code:

Und das folgende JS:

Das wird ausgedruckt:

Hier finden Sie eine Liste der Knotentypen . Eine hervorragende Einführung in das DOM finden Sie in diesem MDN-Artikel

Eine Art, wie ich es mir ansehen wollte, als ich mit jQuery anfing, ist so etwas (und ja, ich weiß, dass alles nicht ganz korrekt ist, aber sie arbeiteten als lose Analogien):

DOM-Elemente sind die Knoten in Ihrem HTML-Dokument, die Sie normalerweise mit Vanille-Javascript erhalten. Etwas wie var foo = document.getElementById('bar') bringt dir ein rohes DOM-Element.

jQuery-Wrapper-Objekte (für einen großen Teil der jQuery-Entwicklung) sind im Grunde genommen ein ganz neues Objekt, das ein DOM-Element enthält. Und das ist im Grunde genommen ein Container. Das bekommst du mit etwas wie $('#bar') und das bekommst du auch, indem du ein DOM-Element wie $(foo) einfügst. Diese aktivieren die verschiedenen jQuery-Funktionalitäten für Ihre DOM-Objekte - Dinge, die sie normalerweise nicht hätten, wenn sie reine DOM-Objekte wären.

Darauf aufbauend ist der Unterschied zwischen .get() und .index() ziemlich einfach.

.get(n) gibt das nth DOM-Element in einem jQuery-Wrapper-Objekt zurück. Etwas wie $('input').get(0) gibt dir das erste <input> -Element im DOM, als ob du document.getElementById() darauf (oder etwas Ähnliches) aufgerufen hättest. .eq(n) macht etwas ähnliches, gibt aber stattdessen ein jQuery-Wrapper-Objekt zurück, das das DOM-Element enthält.

.index() gibt Ihnen nur die Position eines bestimmten Elements in einem jQuery-Wrapper-Objekt. Das funktioniert ähnlich wie man es von Arrays und anderen Sammlungen erwartet.

HTML! = DOM! = Javascript! = jQuery, aber sie sind alle eng miteinander verwandt.

Der Browser empfängt ein HTML-Dokument von einem Webserver, bei dem es sich nur um Text handelt. Der Browser fährt fort mit parsen diesen Text in eine interne Struktur, die er tatsächlich verwenden kann, um die Seite visuell darzustellen. Das DOM repräsentiert die interne Struktur, die ein Browser von einem HTML-Dokument hat. JavaScript (oder andere Methoden) können verwendet werden, um das DOM zu manipulieren, was wiederum das visuelle rendern der Seite ändert. Ein DOM-Knoten und ein DOM-Element sind nur zwei Namen für dieselbe Sache. Ein DOM-Element repräsentiert ein visuelles oder funktionales Element auf der Seite, die aus dem ursprünglichen HTML-Dokument erstellt wurde.

jQuery ist jetzt eine Javascript-Bibliothek, die die Manipulation des DOM einfacher macht als mit reinem Javascript, indem eine Reihe von Komfort-Shortcuts angeboten wird. Ein jQuery-Objekt ist ein Javascript-Objekt, das mit dem DOM etwas zu tun haben kann oder auch nicht (normalerweise tut es das). Ein jQuery-Objekt ist ein Convenience-Wrapper um ein DOM-Element in Javascript, mit dem das DOM manipuliert werden kann, das eine Repräsentation der Seite darstellt, die aus einer HTML-Datei erstellt wurde.

Ich hoffe, das hilft. : o)

Ich weiß, das ist keine Erklärung als solche - andere haben hier einen ziemlich guten Job gemacht. Aber ich denke, Visuals können dir viel mehr erzählen.

Holen Sie sich Safari / Chrome (mit ihren Entwicklermenüs) oder Firefox mit Firebug und schauen Sie sich an, wie diese Webprogrammierungstools die Dinge darstellen, die Sie wissen möchten.

Zum Beispiel sagt das DOM "Document Object Model" alles, aber Sie werden die Beziehung zwischen den Objekten (Elementen) im Dokument (HTML-Seite) nur verstehen, wenn Sie es als Hierarchie betrachten. Diese Funktionen ermöglichen es Ihnen, diese Hierarchie auf eine sinnvolle visuelle Weise zu navigieren.

Ebenso enthalten sie auch Bewertungswerkzeuge, mit denen Sie den Namen des Javascript-Objekts eingeben können, um zu sehen, was es enthält.

Sobald Sie damit experimentiert haben, bekommen Sie die Idee, was ein Dokumentobjekt und ein JavaScript-Objekt ist.

Um die Frage jedoch zu beantworten, ruft .get() das Element ab und erlaubt Ihnen, direkt mit ihm zu interagieren, ohne programmatisch durch die DOM-Hierarchie navigieren zu müssen, während .index() nur den Index seiner Position in der Hierarchie findet

Meiner Meinung nach der Code

$('div').get()

ist ein Jquery-Objekt mit einem Parameter, der ein div-Selektor ist. Auf diesem Objekt wird get() aufgerufen. Sie können den Parameter auch als Argument constructor (wie in objektorientierten Sprachen) betrachten, da ein neues Objekt erstellt wird.

DOM-Element ist Browser gerenderter Text jquery object haben Sie diesen Code verwendet var objekt = {} console.log (Objekt);

DOM ist nicht die Struktur der Seite wie unten

DOM ist nur eine Darstellung der Seite
Locker gesprochen ist DOM eine Art objektorientierte Programmiersprache, mit der Sie auf das eigentliche Dokument zugreifen und es bearbeiten können.

Um genauer zu sein, DOM ist eher eine Schnittstelle als eine Programmiersprache und es ist sprachunabhängig. Es ist zufällig in Javascript enthalten.