Warum gibt es kein exists() in jQuery und wie man Elemente fehlerfrei prüft

Warum es in jQuery kein exists() gibt und wie Sie Ihren Code nicht zerstören

Jeder, der schon einmal mit jQuery gearbeitet hat, kennt das: Sie versuchen, auf ein Element zuzugreifen, das nicht auf der Seite existiert, und erhalten einen Fehler, das Skript stürzt ab, der Benutzer sieht einen leeren Bildschirm. Logischerweise stellt sich die Frage: «Gibt es in jQuery eine Funktion exists()?».

Diese Frage ist ein echter Hit auf Stack Overflow (über 150.000 Aufrufe). Und die Antwort wird Sie überraschen: Nein, jQuery hat keine eingebaute Methode exists(). Aber das ist kein Bug, sondern ein Feature. In diesem Artikel werden wir analysieren, warum das so ist, welche Fehler Anfänger (und nicht nur sie) machen und wie man die Existenz von Elementen korrekt prüft. Los geht's!

Kurze Antwort: «Länge» ist alles

Der einfachste und korrekteste Weg, um zu prüfen, ob ein Element auf der Seite existiert, ist die Verwendung der Eigenschaft length. Wenn das jQuery-Objekt mindestens ein Element enthält, ist length größer als Null, was im booleschen Kontext true ergibt.

if ($('#my-element').length) {\n    // Element existiert – kann loslegen\n    $('#my-element').show();\n} else {\n    // Element nicht vorhanden – nichts tun\n    console.log('Element nicht gefunden');\n}

Warum funktioniert das? jQuery gibt ein array-ähnliches Objekt zurück. Wenn der Selektor nichts gefunden hat, ist die Länge dieses Objekts 0. 0 in JavaScript ist false.

Man kann es noch kürzer schreiben:

if ($('#my-element').length > 0) {\n    // Funktioniert auch, ist aber redundant\n}

Top-5-Fehler bei der Existenzprüfung von Elementen in jQuery

Fehler #1: Direkter Zugriff auf ein nicht existierendes Element

Der häufigste und gefährlichste Fehler ist der Versuch, eine Methode auf einem leeren jQuery-Objekt aufzurufen:

// Code, der mit einem Fehler abstürzt\n$('#nonexistent').text('Hallo!');

Tatsächlich wird dieser Code nicht abstürzen. jQuery ist so konzipiert, dass der Aufruf von Methoden auf einem leeren Objekt einfach nichts bewirkt. Aber das Problem: Wenn Sie versuchen, einen Wert zu erhalten, z. B. .val(), erhalten Sie undefined. Und wenn Sie versuchen, über einen Index auf das DOM-Element zuzugreifen, erhalten Sie den Fehler Cannot read properties of undefined.

// Aber das ist schon gefährlich!\nvar text = $('#nonexistent').text(); // gibt einen leeren String zurück\nvar value = $('#nonexistent').val(); // gibt undefined zurück\n\n// Und das ist ein garantierter Fehler\nvar firstClass = $('#nonexistent')[0].className; // TypeError!

Fehler #2: Verwendung von $(selector).size()

Früher gab es in jQuery die Methode .size(), die die Anzahl der Elemente zurückgab. Sie galt bereits in jQuery 1.8 als veraltet und wurde in Version 3.0 vollständig entfernt. Sie heute zu verwenden, ist schlechter Stil und ein Risiko für die Kompatibilität.

// Schlecht (veralteter Code)\nif ($('.my-class').size() > 0) { ... }\n\n// Gut (moderner Ansatz)\nif ($('.my-class').length) { ... }

Fehler #3: Verwechslung von .is() und Filterung

Die Methode .is() prüft, ob das aktuelle Element einem Selektor entspricht. Sie prüft nicht die Existenz des Elements an sich, sondern arbeitet mit bereits gefundenen Elementen. Anfänger schreiben oft so etwas:

// Falsch: .is() ersetzt keine Existenzprüfung\nif ($('#my-element').is('*')) {\n    // Element existiert?\n}

Das wird funktionieren, sieht aber seltsam aus und ist ineffizient. .is('*') prüft lediglich, ob das Element ein beliebiges Tag ist. Wenn das Element existiert, gibt es true zurück, wenn nicht, false. Aber warum so kompliziert, wenn es .length gibt?

Fehler #4: Prüfung mit document.getElementById

Manche Entwickler mischen reines JavaScript und jQuery, wenn es nicht nötig ist:

// Redundant und unschön\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti