document.getElementById vs jQuery $ ()

Ist das:

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

Das gleiche wie das:

var contents = $('#contents');

Angesichts der Tatsache, dass jQuery geladen ist?

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

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

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.

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 .

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

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

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

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.

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

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.

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.

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

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

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