wlw

Appearance

Return to top
On this page
JavaScript und DOM
1

JavaScript und DOM

08.11.2022
JavaScript und DOM
2

JS im DOM registieren

  • JS kann im head oder body registriert werden
  • Häufig separates File (z.B. main.js)
js
<script src="./main.js"></script>
08.11.2022
JavaScript und DOM
3

Window und Document

  • Das window Objekt gibt den Context für den ganzen DOM.
  • Selber testen console.log(window).
  • Variable document zeight auf den gerenderten DOM.
08.11.2022
JavaScript und DOM
4

Manipulation

  • JS kann den DOM manupulieren
  • Typische manipulationen
    • element hinzufügen / entfernen
    • class einem Element hinzufügen / entfernen
    • nach Element suchen
    • Eventlistener registrieren / entfernen
08.11.2022
JavaScript und DOM
5

Vor der Manipulation

  • warten, bis der DOM vollständig geladen ist
  • ... onload callback
js
window.onload = () => {
    // let's go!
};
08.11.2022
JavaScript und DOM
6

Wichtige DOM Methoden

Methoden von document
getElementById(id)Findet Element Anhand einer ID
createElemet(tag)Erstellt ein neues Element mit dem tag
querySelector(query)Findet Elemente, die query erfüllen (ähnlich wie bei CSS)
08.11.2022
JavaScript und DOM
7

Wichtige Props / Methoden von Nodes

Methode / Prop von Node
.classListListe von CSS classes (add, remove)
.valueInhalt bei Form / Textarea
.innerHTMLHTML des Nodes (kann zugewiesen werden)
.innerTextText zuweisen
.parentElementReferenz zum Parent
remove()element aus DOM entfernen
appendChild(node)Neuen Node anhängen
08.11.2022
JavaScript und DOM
8

Click Listener

  • Click listener mit onclick.
  • Target Node auf welchen geclick wurde in ev.currentTarget.
js
document.getElementById("btn").onclick = (ev) => {
    console.log(`click auf ${ev.currentTarget}`);
};
08.11.2022
JavaScript und DOM
9

Element erstellen und DOM hinzufügen

js
const container = document.querySelector("#main-container");
const element = document.createElement("div");
element.innerText = "Neues Element!";
container.appendChild(element);
08.11.2022
JavaScript und DOM
10

Cient Side Render vs. Server Side Render

  • Server Side Render heisst, dass der DOM vom Server als HTML (vollständig) geliefert wird. Die Seite wird primär nicht von JS Clientseitig zusammengeschustert.
  • Client Side Render heisst, dass die Webseite als einfaches <html> Dokument ohne viel Inhalt in <body> geliefert wird. Die Elemente werden via JS zur Laufzeit vom Browser injected.
  • In diesem Kontext hat "render" nichts mit dem zeichnen von Pixeln zu tun, sondern mit dem erstellen des DOM.
08.11.2022
JavaScript und DOM
11

Klassische Web Frameworks rendern Serverside

  • Beispiele
08.11.2022
JavaScript und DOM
12

Moderne Frameworks rendern Clientside

  • VueJS und React "kompilieren" eine Webseite als js und bauen den DOM auf, sobald die Seite geöffnet wird.
08.11.2022
JavaScript und DOM
13

Noch modernere Frameworks rendern neu wieder Serverside

  • NextJS für React
  • NuxtJS für Vue
  • Vuepress / Vitepress
  • Hugo
08.11.2022
JavaScript und DOM
14

Daten speichern in localStorage

js
// Persistieren von Daten im Browser
window.localStorage['command'] = 'ls';

const cmd =  {
  name: 'ls',
  desc: 'lists files'
};

// searialize object
window.localStorage['command'] = JSON.stringify(cmd);
...
// load object
const loaded = JSON.parse(window.localStorage['command']);
08.11.2022