Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Abfragen des DOM | DOM-Manipulation
Fortgeschrittene JavaScript-Meisterschaft
course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Abfragen des DOM

Aufgabe

Sie haben eine Einkaufsliste in Ihrem HTML und müssen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.

  1. Nach ID auswählen: Wählen Sie das <h1>-Element mit der ID title aus;
  2. Nach Klasse auswählen: Wählen Sie alle Elemente mit der Klasse item aus;
  3. Nach Tag auswählen: Wählen Sie alle <li>-Elemente aus;
  4. Das erste übereinstimmende Element auswählen: Wählen Sie das erste <li>-Element mit der Klasse item aus;
  5. Alle übereinstimmenden Elemente auswählen: Wählen Sie alle <li>-Elemente mit der Klasse item aus.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden Sie getElementById, um das <h1>-Element mit der ID title auszuwählen;
  • Verwenden Sie getElementsByClassName, um alle Elemente mit der Klasse item auszuwählen;
  • Verwenden Sie getElementsByTagName, um alle <li>-Elemente auszuwählen;
  • Verwenden Sie querySelector, um das erste <li>-Element mit der Klasse item auszuwählen;
  • Verwenden Sie querySelectorAll, um alle <li>-Elemente mit der Klasse item auszuwählen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Abfragen des DOM

Aufgabe

Sie haben eine Einkaufsliste in Ihrem HTML und müssen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.

  1. Nach ID auswählen: Wählen Sie das <h1>-Element mit der ID title aus;
  2. Nach Klasse auswählen: Wählen Sie alle Elemente mit der Klasse item aus;
  3. Nach Tag auswählen: Wählen Sie alle <li>-Elemente aus;
  4. Das erste übereinstimmende Element auswählen: Wählen Sie das erste <li>-Element mit der Klasse item aus;
  5. Alle übereinstimmenden Elemente auswählen: Wählen Sie alle <li>-Elemente mit der Klasse item aus.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden Sie getElementById, um das <h1>-Element mit der ID title auszuwählen;
  • Verwenden Sie getElementsByClassName, um alle Elemente mit der Klasse item auszuwählen;
  • Verwenden Sie getElementsByTagName, um alle <li>-Elemente auszuwählen;
  • Verwenden Sie querySelector, um das erste <li>-Element mit der Klasse item auszuwählen;
  • Verwenden Sie querySelectorAll, um alle <li>-Elemente mit der Klasse item auszuwählen.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3
some-alt