Hauptinhalt

Programmierung

Kurs: Programmierung > Lerneinheit 6

Lesson 4: DOM-Modifikationen

Zusammenfassung: Techniken für DOM-Modifikationen

Ein existierendes Element verändern

Wir haben verschiedene Möglichkeiten wie du Aspekte eines existierenden Elements verändern kannst behandelt:

Attribute verändern

Du kannst den Wert eines Attributes auf einem Element setzen, indem du die Eigenschaft mit dem selben Namen veränderst. Um src eines <img> zu verändern:

imgEl.src = "http://www.dogs.com/dog.gif";

Zusätzlich kannst du auch die Methode setAttribute verwenden:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

Wenn du ein Attribut löschen willst, verwendest du die Methode removeAttribute. So kannst du z.B. das Attribut disabled eines Buttons entfernen, was diesen aktiviert:

imgEl.removeAttribute("disabled");

Styles verändern

Du kannst CSS styles gleich wie Attribute verändern, indem du einfach auf die Eigenschaft style eines Element zugreifst du dieser einen Wert gibst. Um z.B. die Farbe zu verändern:

headingEl.style.color = "hotpink";

Beachte, dass du "camelCase" für CSS Eigenschaften aus mehreren Wörtern verwendest, da Bindestriche in JS keine gültigen Eigenschaftsnamen sind.

headingEl.style.backgroundColor = "salmon";

Klassennamen verändern

Um einem Element eine CSS Klasse zu geben, kannst du die Eigenschaft className setzen:

mainEl.className = "warning";

Dies überschreibt aber alle bestehenden Klassen. Wenn du nur eine zusätzliche Klasse hinzufügen willst, solltest du dies so machen:

mainEl.className += " warning";

In neueren Browsern kannst du stattdessen die Funktion classList verwenden:

mainEl.classList.add("warning");

inner HTML / Text verändern

Um den Inhalt eines Elements komplett mit einem beliebigen HTML String zu ersetzen, kannst du innerHTML verwenden:

mainEl.innerHTML = "cats are the <strong>cutest</strong>";

Wenn du aber keine HTML-Tags übergibst, solltest du stattdessen textContent verwenden:

mainEl.textContent = "cats are the cutest";

Wenn du diese 2 Eigenschaften verwendest solltest du aber sehr vorsichtig sein, denn diese entfernen auch alle Event-Listener (dies lernst du im nächsten Tutorial).

Neue Elemente erstellen

Es gibt eine ganze Reihe von Funktionen, die du verwenden kannst, um völlig neue Elemente zu erstellen und sie zur Seite hinzuzufügen.

Um ein neues Element zu erstellen, verwenden die treffend benannte Funktion createElement:

var imgEl = document.createElement("img");

Um es zur Seite hinzuzufügen, verwende die Funktion appendChild auf dem übergeordneten Element:

document.body.appendChild(imgEl);

Auf ähnliche Weise kannst du auch die Funktionen insertBefore, replaceChild, removeChild und insertAdjacentHTML verwenden.

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.