## Elemente mit JavaScript modifizieren

Wir haben nun unser Element gefunden, was können wir nun alles damit tun?

Eigentlich alles. Wir können den Inhalt des Elementes ändern, Attribute ändern, Klassennamen hinzufügen / löschen und vieles mehr.

### Attribute ändern

`$0.getAttribute(attributeName)`
Um ein Attribut abzufragen, null wenn nicht gesetzt.

`$0.setAttribute(name, value)`
Setzt auf dem Element ein Attribute mit gegebenen Namen und Value.

`$0.removeAttribute(name)`
Entfernt ein Attribut von einem HTML-Element.

### Klassen

Da Klassen auf einem Element häufiger geändert werden, gibt es hierfür ein spezialisiertes Objekt am HTML-Element um die Klassen zu modifizieren.

Dieses befindet sich unter dem Namen element.classList innerhalb des Elementes.

Funktion | Beschreibung
--- | ---
.add(className) | Fügt den gegebenen Klassennamen dem Element hinzu
.contains(className) | `true`, wenn Klassenname in Liste beinhaltet ist, ansonsten `false`

Funktion | Beschreibung
--- | ---
.remove(className) | Entfernt den gegebenen Klassennamen
.replace(oldClass, newClass) | Tauscht `oldClass` durch `newClass` aus
.toggle(className) | Entfernt Klassennamen wenn existent, ansonsten wird der Klassenname hinzugefügt.

### innerText

`element.innerText` ist ein String, der den aktuellen Text des Elementes beinhaltet.

Der Text ist so strukturiert, als würde man den Text auf der Website selektieren und kopieren (enthält also keine HTML-Kind-Elemente, sondern nur dessen Text)

Der Text kann geändert indem die Variable / die Property mit einem neuen Text "assigned" wird. Newlines werden dabei durch `<br>` ausgetauscht.

### innerHTML

Im Kontrast zu `innerText`, beinhaltet `innerHTML` auch alle HTML-Tags die sich innerhalb des ausgewählten Elementes befinden.

Auch hier können wir den Wert überschreiben. Befindet sich eine HTML-Syntax im neuen String, wird dies auch als HTML interpretiert.