Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Arbeiten Mit Elementattributen Im DOM | DOM-Manipulation für Interaktive Webentwicklung
Fortgeschrittene JavaScript-Beherrschung

bookArbeiten Mit Elementattributen Im DOM

Attribute sind Werte, die HTML-Elementen hinzugefügt werden, um zusätzliche Informationen bereitzustellen oder deren Verhalten zu verändern. JavaScript stellt verschiedene Methoden zur Verfügung, um mit diesen Attributen zu arbeiten. So können Sie Attribute dynamisch abrufen, setzen, entfernen oder auf das Vorhandensein bestimmter Attribute prüfen.

GetAttribute()

getAttribute() wird verwendet, um den Wert eines bestimmten Attributs eines Elements abzurufen. Dies ist nützlich, wenn Sie auf spezifische Attributwerte wie href, src, class usw. zugreifen müssen.

index.html

index.html

index.js

index.js

copy

Greift auf den Wert des href-Attributs des Ankerelements (<a>) zu.

SetAttribute()

setAttribute() wird verwendet, um ein neues Attribut hinzuzufügen oder den Wert eines bestehenden Attributs eines Elements zu ändern.

index.html

index.html

index.js

index.js

copy

Setzt oder aktualisiert das alt-Attribut des Bildes, wodurch dynamische Änderungen basierend auf Benutzeraktionen oder Anwendungslogik ermöglicht werden.

RemoveAttribute()

removeAttribute() entfernt ein angegebenes Attribut von einem Element und ist somit nützlich, um Attribute abhängig von bestimmten Ereignissen oder Zuständen bedingt umzuschalten.

index.html

index.html

index.js

index.js

copy

Entfernt das Attribut disabled und ermöglicht die Interaktion mit dem Button.

HasAttribute()

hasAttribute() prüft, ob ein Element ein bestimmtes Attribut besitzt. Diese Methode ist besonders nützlich für bedingte Logik, um sicherzustellen, dass bestimmte Attribute vorhanden sind, bevor weitere Aktionen ausgeführt werden.

index.html

index.html

index.js

index.js

copy

Prüft, ob das required-Attribut im Eingabefeld vorhanden ist, und gibt entsprechend eine Meldung aus.

Unterschiede zwischen Eigenschaften und Attributen

Obwohl Eigenschaften und Attribute oft synonym verwendet werden, erfüllen sie unterschiedliche Aufgaben im DOM. Im Folgenden werden ihre Unterschiede erläutert.

index.html

index.html

index.js

index.js

copy
  • Das value-Attribut behält den ursprünglich im HTML definierten Wert bei;
  • Die value-Eigenschaft spiegelt den aktuellen, dynamisch aktualisierten Zustand des Eingabefelds wider.

Praktisches Beispiel: Verwaltung von Produktdetails auf einer E-Commerce-Website

Stellen Sie sich vor, Sie haben einen Produktdetailbereich, in dem Benutzer Produktinformationen wie Verfügbarkeit, Hervorhebungsstatus und Versandoptionen aktualisieren können. Dieses Beispiel zeigt, wie Attribute verwendet werden, um diese Aspekte dynamisch zu steuern.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Die Methode setAttribute() wird verwendet, um bestimmten Elementen dynamisch Attribute basierend auf Benutzeraktionen hinzuzufügen. Beispielsweise fügt setAttribute() beim Umschalten des Verfügbarkeitsstatus auf "Out of Stock" eine out-of-stock-Klasse hinzu, um eine spezielle Formatierung anzuwenden. Ebenso wird ein data-featured-Attribut zum Featured-Checkbox hinzugefügt, wenn das Produkt als hervorgehoben markiert ist.

Die Methode removeAttribute() entfernt diese Attribute, wenn sie nicht mehr benötigt werden. Zum Beispiel entfernt sie die out-of-stock-Klasse beim Zurückschalten auf "In Stock" und entfernt das data-featured-Attribut, wenn das Produkt nicht mehr als hervorgehoben markiert ist. Zusätzlich wird removeAttribute() verwendet, um die Sichtbarkeit der Versandinformationen durch Hinzufügen oder Entfernen des hidden-Attributs umzuschalten.

Abschließend prüft hasAttribute(), ob diese Attribute vorhanden sind, wie zum Beispiel das Überprüfen, ob das data-featured-Attribut existiert, bevor der Featured-Status aktualisiert wird, oder das Überprüfen des hidden-Attributs bei den Versandinformationen, um deren Sichtbarkeitsstatus zu bestimmen.

1. Mit welcher Methode wird der Wert eines Attributs von einem Element abgerufen?

2. Was macht die Methode setAttribute()?

3. Was gibt der folgende Code aus?

question mark

Mit welcher Methode wird der Wert eines Attributs von einem Element abgerufen?

Select the correct answer

question mark

Was macht die Methode setAttribute()?

Select the correct answer

question mark

Was gibt der folgende Code aus?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 2.22

bookArbeiten Mit Elementattributen Im DOM

Swipe um das Menü anzuzeigen

Attribute sind Werte, die HTML-Elementen hinzugefügt werden, um zusätzliche Informationen bereitzustellen oder deren Verhalten zu verändern. JavaScript stellt verschiedene Methoden zur Verfügung, um mit diesen Attributen zu arbeiten. So können Sie Attribute dynamisch abrufen, setzen, entfernen oder auf das Vorhandensein bestimmter Attribute prüfen.

GetAttribute()

getAttribute() wird verwendet, um den Wert eines bestimmten Attributs eines Elements abzurufen. Dies ist nützlich, wenn Sie auf spezifische Attributwerte wie href, src, class usw. zugreifen müssen.

index.html

index.html

index.js

index.js

copy

Greift auf den Wert des href-Attributs des Ankerelements (<a>) zu.

SetAttribute()

setAttribute() wird verwendet, um ein neues Attribut hinzuzufügen oder den Wert eines bestehenden Attributs eines Elements zu ändern.

index.html

index.html

index.js

index.js

copy

Setzt oder aktualisiert das alt-Attribut des Bildes, wodurch dynamische Änderungen basierend auf Benutzeraktionen oder Anwendungslogik ermöglicht werden.

RemoveAttribute()

removeAttribute() entfernt ein angegebenes Attribut von einem Element und ist somit nützlich, um Attribute abhängig von bestimmten Ereignissen oder Zuständen bedingt umzuschalten.

index.html

index.html

index.js

index.js

copy

Entfernt das Attribut disabled und ermöglicht die Interaktion mit dem Button.

HasAttribute()

hasAttribute() prüft, ob ein Element ein bestimmtes Attribut besitzt. Diese Methode ist besonders nützlich für bedingte Logik, um sicherzustellen, dass bestimmte Attribute vorhanden sind, bevor weitere Aktionen ausgeführt werden.

index.html

index.html

index.js

index.js

copy

Prüft, ob das required-Attribut im Eingabefeld vorhanden ist, und gibt entsprechend eine Meldung aus.

Unterschiede zwischen Eigenschaften und Attributen

Obwohl Eigenschaften und Attribute oft synonym verwendet werden, erfüllen sie unterschiedliche Aufgaben im DOM. Im Folgenden werden ihre Unterschiede erläutert.

index.html

index.html

index.js

index.js

copy
  • Das value-Attribut behält den ursprünglich im HTML definierten Wert bei;
  • Die value-Eigenschaft spiegelt den aktuellen, dynamisch aktualisierten Zustand des Eingabefelds wider.

Praktisches Beispiel: Verwaltung von Produktdetails auf einer E-Commerce-Website

Stellen Sie sich vor, Sie haben einen Produktdetailbereich, in dem Benutzer Produktinformationen wie Verfügbarkeit, Hervorhebungsstatus und Versandoptionen aktualisieren können. Dieses Beispiel zeigt, wie Attribute verwendet werden, um diese Aspekte dynamisch zu steuern.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Die Methode setAttribute() wird verwendet, um bestimmten Elementen dynamisch Attribute basierend auf Benutzeraktionen hinzuzufügen. Beispielsweise fügt setAttribute() beim Umschalten des Verfügbarkeitsstatus auf "Out of Stock" eine out-of-stock-Klasse hinzu, um eine spezielle Formatierung anzuwenden. Ebenso wird ein data-featured-Attribut zum Featured-Checkbox hinzugefügt, wenn das Produkt als hervorgehoben markiert ist.

Die Methode removeAttribute() entfernt diese Attribute, wenn sie nicht mehr benötigt werden. Zum Beispiel entfernt sie die out-of-stock-Klasse beim Zurückschalten auf "In Stock" und entfernt das data-featured-Attribut, wenn das Produkt nicht mehr als hervorgehoben markiert ist. Zusätzlich wird removeAttribute() verwendet, um die Sichtbarkeit der Versandinformationen durch Hinzufügen oder Entfernen des hidden-Attributs umzuschalten.

Abschließend prüft hasAttribute(), ob diese Attribute vorhanden sind, wie zum Beispiel das Überprüfen, ob das data-featured-Attribut existiert, bevor der Featured-Status aktualisiert wird, oder das Überprüfen des hidden-Attributs bei den Versandinformationen, um deren Sichtbarkeitsstatus zu bestimmen.

1. Mit welcher Methode wird der Wert eines Attributs von einem Element abgerufen?

2. Was macht die Methode setAttribute()?

3. Was gibt der folgende Code aus?

question mark

Mit welcher Methode wird der Wert eines Attributs von einem Element abgerufen?

Select the correct answer

question mark

Was macht die Methode setAttribute()?

Select the correct answer

question mark

Was gibt der folgende Code aus?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 7
some-alt