Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: DOM-Elemente Abfragen und Auswählen | DOM-Manipulation für Interaktive Webentwicklung
Fortgeschrittene JavaScript-Beherrschung

bookHerausforderung: DOM-Elemente Abfragen und Auswählen

Aufgabe

In Ihrem HTML befindet sich eine Einkaufsliste, und Sie sollen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.

  1. Nach ID auswählen: Das <h1>-Element mit der ID title auswählen;
  2. Nach Klasse auswählen: Alle Elemente mit der Klasse item auswählen;
  3. Nach Tag auswählen: Alle <li>-Elemente auswählen;
  4. Erstes passendes Element auswählen: Das erste <li>-Element mit der Klasse item auswählen;
  5. Alle passenden Elemente auswählen: Alle <li>-Elemente mit der Klasse item auswählen.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • getElementById verwenden, um das <h1>-Element mit der ID title auszuwählen;
  • getElementsByClassName verwenden, um alle Elemente mit der Klasse item auszuwählen;
  • getElementsByTagName verwenden, um alle <li>-Elemente auszuwählen;
  • querySelector verwenden, um das erste <li>-Element mit der Klasse item auszuwählen;
  • querySelectorAll verwenden, 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

Suggested prompts:

Can you show me the HTML structure of the shopping list?

Can you provide example code for each selection method?

Can you explain the difference between querySelector and querySelectorAll?

Awesome!

Completion rate improved to 2.22

bookHerausforderung: DOM-Elemente Abfragen und Auswählen

Swipe um das Menü anzuzeigen

Aufgabe

In Ihrem HTML befindet sich eine Einkaufsliste, und Sie sollen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.

  1. Nach ID auswählen: Das <h1>-Element mit der ID title auswählen;
  2. Nach Klasse auswählen: Alle Elemente mit der Klasse item auswählen;
  3. Nach Tag auswählen: Alle <li>-Elemente auswählen;
  4. Erstes passendes Element auswählen: Das erste <li>-Element mit der Klasse item auswählen;
  5. Alle passenden Elemente auswählen: Alle <li>-Elemente mit der Klasse item auswählen.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • getElementById verwenden, um das <h1>-Element mit der ID title auszuwählen;
  • getElementsByClassName verwenden, um alle Elemente mit der Klasse item auszuwählen;
  • getElementsByTagName verwenden, um alle <li>-Elemente auszuwählen;
  • querySelector verwenden, um das erste <li>-Element mit der Klasse item auszuwählen;
  • querySelectorAll verwenden, 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