So vermeiden Sie Frustrationen, indem Sie den richtigen JavaScript-Selektor auswählen

Eine Kurzanleitung, wie sich Selektoren auf Ihren Code auswirken

Während ich an einem Projekt arbeitete, stieß ich auf ein Problem in meinem Code. Ich habe versucht, mehrere HTML-Elemente in einer Sammlung zu definieren und diese Elemente dann basierend auf einigen voreingestellten Bedingungen zu ändern. Ich kämpfte ungefähr vier Stunden lang (über zwei Tage) mit dem Debuggen meines Codes und versuchte herauszufinden, warum ich nicht das gewünschte Ergebnis erzielte.

Es stellte sich heraus, dass ich document.querySelectorAll () verwendet hatte , um meine Elemente einer Variablen zuzuweisen, und dann versuchte ich, diese Elemente zu ändern. Das einzige Problem ist, dass ein bestimmter JavaScript-Selektor eine statische Knotenliste zurückgibt . Da es sich nicht um eine Live-Darstellung der Elemente handelt, konnte ich sie später in meinem Code nicht ändern.

Annahmen

In diesem Artikel gehe ich davon aus, dass einige Dinge wahr sind:

  • Sie arbeiten in "einfachem oder Vanille" JavaScript (kein Framework / Bibliothek)
  • Sie haben ein grundlegendes Verständnis von JavaScript-Elementen / Selektoren
  • Sie haben ein grundlegendes Verständnis des DOM

Das Nitty-Gritty

Für den Fall, dass ich zu viel angenommen habe, habe ich Links zu relevantem Material innerhalb des Artikels bereitgestellt, von denen ich hoffe, dass sie hilfreich sind.

JavaScript ist ein so umfangreiches und reichhaltiges Ökosystem, dass es keine Überraschung ist, dass es viele Möglichkeiten gibt, dieselbe Aufgabe zu erfüllen. Abhängig von Ihrer Aufgabe ist die Art und Weise, wie sie ausgeführt wird, bis zu einem gewissen Grad von Bedeutung.

Sie können mit Ihren Händen ein Loch graben, aber es ist viel einfacher und effizienter, es mit einer Schaufel zu tun.

Zu diesem Zweck hoffe ich, Ihnen nach dem Lesen dieses Artikels eine Schaufel zu geben.

Auswahl des richtigen Werkzeugs für den Job

Ich hatte die Frage: "Welchen Element-Selektor soll ich verwenden?" mehrmals. Bis jetzt hatte ich nicht viel Lust oder Bedürfnis, den Unterschied zu lernen, solange mein Code das gewünschte Ergebnis lieferte. Was macht denn die Farbe des Taxis aus, solange es Sie sicher und rechtzeitig an Ihr Ziel bringt?

Beginnen wir mit einigen Möglichkeiten, DOM- Elemente in JavaScript auszuwählen . Es gibt mehr Möglichkeiten (glaube ich), Elemente auszuwählen, aber die hier aufgeführten sind bei weitem die am weitesten verbreiteten, auf die ich gestoßen bin.

document.getElementById ()

Diese geben immer nur ein (1) Element zurück, da IDs naturgemäß eindeutig sind und es jeweils nur ein (mit demselben Namen) auf der Seite geben kann.

Es gibt ein Objekt zurück, das mit der übergebenen Zeichenfolge übereinstimmt. Es gibt null zurück, wenn in Ihrem HTML keine übereinstimmende ID gefunden wird.

Syntaxbeispiel - & g t; document.getElementById ('main_conten t')

Im Gegensatz zu einigen Selektoren, auf die wir später in diesem Artikel noch eingehen werden, ist kein # erforderlich, um die Element-ID zu kennzeichnen.

document.getElementsByTagName ()

Beachten Sie das "S" in Elementen - dieser Selektor gibt Vielfache zurückin einer Array-ähnlichen StrukturAls HTML-Sammlung bezeichnet - Das gesamte Dokument wird einschließlich des Stammknotens (des Dokumentobjekts) nach einem passenden Namen durchsucht. Diese Elementauswahl beginnt oben im Dokument und wird nach unten fortgesetzt, um nach Tags zu suchen, die mit der übergebenen Zeichenfolge übereinstimmen.

Wenn Sie native Array-Methoden verwenden möchten, haben Sie kein Glück. Das heißt, es sei denn, Sie konvertieren die zurückgegebenen Ergebnisse in ein Array, um sie zu durchlaufen, oder verwenden den ES6-Spread-Operator - beides geht über den Rahmen dieses Artikels hinaus. Aber ich wollte, dass Sie wissen, dass es möglich ist, Array-Methoden zu verwenden, wenn Sie möchten.

Syntaxbeispiel - & g t; document.getElementsByTagName ('header_li nks'). Dieser Selektor akzeptiert auch p, div, body oder andere gültige HTML-T ags.

document.getElementsByClassName ()

Klassennamen-Selektor - beachten Sie erneut das "S" in Elementen - dieser Selektor gibt Vielfache zurückin einer Array-ähnlichen Strukturbekannt als HTML-Sammlung von Klassennamen. Es stimmt mit der übergebenen Zeichenfolge überein (kann mehrere Klassennamen annehmen, obwohl sie durch ein Leerzeichen getrennt sind), durchsucht das gesamte Dokument, kann für jedes Element aufgerufen werden und gibt nur Nachkommen der übergebenen Klasse zurück.

Auch Nein . (Punkt) wird benötigt, um den Klassennamen zu bezeichnen

Syntaxbeispiel: document.getElementsByClassName ('classNam e')

document.querySelector ()

Dieser Selektor gibt immer nur ein (1) Element zurück.

Es wird nur das erste Element zurückgegeben, das mit der übergebenen Zeichenfolge übereinstimmt. Wenn keine Übereinstimmungen für die angegebene Zeichenfolge gefunden werden, ist nullist zurück gekommen.

Syntaxbeispiel: document.querySelector ('# side_note ') oder document.querySelector ('. Header_link s')

Im Gegensatz zu allen unseren vorherigen Beispielen erfordert dieser Selektor a. (Punkt) zur Bezeichnung der Klasse oder ein # (octothorp) zur Bezeichnung einer ID und funktioniert mit allen CSS-Selektoren.

document.querySelectorAll ()

Dieser Selektor gibt Vielfache zurück , die mit der übergebenen Zeichenfolge übereinstimmen, und ordnet sie in einer anderen Array-ähnlichen Struktur an, die als Knotenliste bezeichnet wird.

Wie bei einigen der vorherigen Beispiele kann die Knotenliste keine nativen Array-Methoden wie .forEach () verwenden. Wenn Sie diese verwenden möchten, müssen Sie zuerst die Knotenliste in ein Array konvertieren. Wenn Sie nicht konvertieren möchten, können Sie die Knotenliste dennoch mit einer for… in-Anweisung durchlaufen.

Die übergebene Zeichenfolge muss mit einer gültigen CSS-Selektor-ID, Klassennamen, Typen, Attributen, Attributwerten usw. übereinstimmen.

Syntaxbeispiel: document.querySelectorAll ('. Footer_link s')

Einpacken

Wenn Sie den richtigen Selektor für Ihre Codierungsanforderungen auswählen, vermeiden Sie viele der Fallstricke, in die ich geraten bin. Es kann unglaublich frustrierend sein, wenn Ihr Code nicht funktioniert, aber wenn Sie sicherstellen, dass Ihr Selektor Ihren Situationsanforderungen entspricht, haben Sie keine Probleme, „mit Ihrer Schaufel zu graben“ :)

Vielen Dank für das Lesen dieses Beitrags. Wenn es Ihnen gefallen hat, sollten Sie einige Klatschen spenden, damit andere es auch finden können. Ich veröffentliche (aktiv meinen Zeitplan verwalten, um mehr zu schreiben) verwandte Inhalte in meinem Blog. Ich bin auch auf Twitter aktiv und freue mich immer, mit anderen Entwicklern in Kontakt zu treten!