Digital Typography – UI/UX Design

Technik Workshops

JavaScript im Browser – DOM Manipulation

Der Browser liefert zu jedem gerenderten HTML-Dokument die Variable document. Sie enthält ein Objekt mit allen Eigenschaften des Dokuments. Sie enthält ebenfalls eine ganze Reihe von Methoden, die dazu dienen, mit dem document-Objekt zu interagieren.

Fun fact: Der Browser liefert auch eine window Variable, die Informationen und Methoden enthält, die das Browser-Fenster bzw. -Tab betreffen. Das klammere ich vorerst einmal aus.

ausgewählte Methoden von document

querySelector()

Mit der Methode document.querySelector() kannst du einzelne HTML-Elemente ansprechen, z.B. um sie in eine Variable zu speichern. Als Argument verwendest du einen Selektor wie in CSS.

document.querySelector('#cookie-banner') liefert das Element mit der id cookie-banner.

createElement()

Generiert ein neues HTML-Element.

document.body

Das <body> Element und all seine Inhalte und Kinder.

appendChild()

Fügt einem HTML-Element ein weiteres an.

let newParagraph = document.createElement('p')
newParagraph.innerHTML = "Hello World!"
document.body.appendChild(newParagraph)

ausgewählte Methoden und Eigenschaften einzelner HTML-Elemente

remove()

Löscht ein HTML-Element.

let cookieBanner = document.querySelector('#cookie-banner')
cookieBanner.remove()

innerHTML

Der Inhalt eines HTML-Elements, d.h. alles, was zwischen seinen Tags steht.

let title = document.querySelector('h1')
title.innerHTML = "Hello World!"

classList()

Eine Art Interface zu den Klassen eines Elements.

foo.classList.add('hello') fügt dem HTML-Element foo die Klasse foo hinzu.

foo.classList.remove('hello') entfernt die Klasse hello vom HTML-Element foo.

foo.classList.toggle('hello') schaltet die Klasse hello des Elements foo an/ab, je nachdem ob sie schon vorhanden ist oder nicht.

Das hinzufügen oder entfernen einer Klasse ist im Zusammenspiel mit CSS extrem potent. Die Möglichkeiten reichen von aus- und einblenden über Farbwechsel bis zu Animation.

Event Listeners

All dies ist schön und gut, nützt aber ohne Interaktivität nicht viel. Es gibt zwar HTML-Elemente wie Links und Formular-Bausteine die reaktiv sind, aber um JavaScript etwas mit Klicks, Tastenanschlägen o.ä. anzustellen, braucht es mehr.

Ein die Methode addEventListener() fügt einem HTML-Element einen sogenannten Event Listener hinzu. Dadurch beginnt der Browser darauf zu achten, ob mit dem Element etwas bestimmtes geschieht, es z.B. angeklickt wird, wie im folgenden Snippet.

function doSomething() {
  document.body.remove()
  // oder etwas sinnvolleres
}

// Einer Variablen das HTML-Element mit der id self-destruct als Wert zuweisen
let myButton = document.querySelector("#self-destruct")

// dem Element den EventListener «anhängen»
myButton.addEventListener('click', doSomething)

Nebst click gibt es noch eine Vielzahl anderer Events, die zum Auslösen bestimmter Funktionen werden können.

TimeOut

Ebenfalls oft gebraucht wird die Funktion setTimeOut, die nach ähnlichem Prinzip funktioniert wie ein Event Listener.

setTimeout(functionName, 1000)

Das erste Argument ist ein Funktionsaufruf (‘callback’), das zweite eine Zeitangabe in Millisekunden. Der gegenwärtig häufigste Anwendungsfall sind Newsletter-Banner und dergleichen, die erst ein paar Sekunden nach Laden einer Website auftauchen.

Hier ein Beispiel auf CodePen.

CSS-Eigenschaften mit JavaScript definieren

CSS-Eigenschaften eines HTML-Elements können direkt in JavaScript gesetzt werden, das kann in bestimmten Fällen Sinn machen, z.B. wenn du nicht mit classList.toggleClass() arbeiten möchtest.

Jedes HTML-Element hat eine Style-Datensammlung, die alle CSS-Eigenschaften enthält. Angesteuert werden sie mit der Schreibweise element.style.eigenschaft. Du kannst diesen eine Zeichenfolge als Wert zuweisen, um sie zu ändern: foo.style.color = 'red'

Es gibt viele CSS-Eigenschaften, die mit Bindestrich geschrieben werden, z.B. font-size oder line-height.

let myButton = document.querySelector('#my-button')
let myOtherElement = document.querySelector('#my-other-element');

function changeColor() {
  let s = Math.floor(10 + Math.random() * 90) // 10–100
  myOtherElement.style.fontSize = s + 'px'
}

myButton.addEventListener('click', changeColor)

(In CSS gibt es (noch) keine Zufallszahlen, also ist es nur mit JavaScript möglich, einem Element auf Knopfdruck eine zufällige Schriftgrösse zu geben.)

Siehe Beispiel in Codepen

Links

  • Wie gewohnt ist auch beim Thema JavaScript MDN eine sehr gute Quelle. Unter Tutorials gibt es gute Artikel zum Einstieg.
  • Marijn Haverbeke, Eloquent JavaScript Eine umfassende Einführung in JavaScript. Erfordert viel eigene Denkleistung und ungeeignet, um sich schnell einen Überblick zu verschaffen.
  • Plain JS, eine Sammlung von JavaScript-Funktionen und kurzen Anleitungen für DOM-Manipulation mit reinem JavaScript (ohne Hilfsmittel wie jQuery).