Introduction to the DOM

The BOM and the DOM

BOM: Browser Object Model
DOM: Document Object Model

The BOM

Das Browser Object Model bezieht sich auf eine Reihe von JavaScript-Objekten, die vom Browser zur Verfügung gestellt werden. Das wichtigste bzw. bekannteste ist das window Objekt.
Wenn wir die DevTools im Browser öffnen und console.log(windows) eingibt, sehen wir eine Liste aller JavaScript Methoden, die wir nutzen können.
Wir können jede Eigenschaft innerhalb des Windows-Objekts nutzen, indem wir window.propertyName oder einfach nur propertyName schreiben. window wird immer automatisch ergänzt.

The DOM

Das Document Object Model bezieht sich auf das HTML-Dokument in JavaScript. Wir können darauf mit document zugreifen.

Selecting Elements

Was auch immer wir mit einem HTML-Dokument anstellen wollen, zuerst müssen wir die beteiligten Elemente auswählen. Das machen wir mit der querySelector Methode des document Objekts.

const element = document.querySelector(selector);

selector bezieht sich auf ein HTML-Tag, eine ID, eine Klasse oder ein Attribut. Die Schreibweise ist dieselbe wie wenn wir ein Element in CSS auswählen:

ein Element über ein HTML-Tag auswählen: button
ein Element über eine ID auswählen: #ID
ein Element über eine Klasse auswählen: .class
ein Element über ein Attribut auswählen: [data-type="xxx"]

Die Methode querySelector gibt immer das erste Element zurück, das sie findet, ganz egal, wieviele Elemente es davon gibt.

Welchen Selector soll man verwenden? Das hängt von zwei Dingen ab:

ist ein Zugriff auf das HTML möglich?
wieviele Elemente sollen selektiert werden?

Wenn 1. gegeben ist, und ein Element benötigt wird, dann ist der Selektor der Wahl die id, weil die nur einmal auf der Seite vorkommen kann.
Wenn 1. gegeben ist, und mehrere Elemente benötigt werden, dann gilt: Klasse und Attribut sind gleichwertig, wobei die Klasse meist für die erste Selektion und ein Attribut als weiterer Filter verwendet wird. Tags sind meistens zu generisch.

Complex selectors

Wir können Selektoren wie in CSS kombinieren, aber meistens ist das gar nicht nötig. Am besten benutzen wir so wenige wie möglich.

Element selector

Jedes Element verfügt ebenfalls über die querySelector Methode (weil ja in JavaScript irgendwie alles ein Objekt ist, ist auch ein Element eines und das hat eben wieder Eigenschaften und Methoden).
So kann man innerhalb eines Elements nach einem anderen Element suchen, das verbessert die Performance.

<ul class="cats">
  <li>Pedro</li>
  <li>George</li>
  <li>Lotti</li>
</ul>

Jetzt wollen wir Pedro auswählen. Wir können das entweder über document.querySelector('li') machen, der das erste Listenelement zurückgibt. Wir können aber auch zuerst die Liste auswählen und dann das erste Element dieser Liste.

const catList = document.querySelector('ul');
const firstCat = catList.querySelector('li');

JavaScript Hooks

Praktisch ist es, wenn man Komponenten, die JavaScript benötigen, ein js Prefix vor der Klasse mitgibt. Man sieht auf einen Blick, dass diese Klasse für JavaScript da ist und löscht sie nicht versehentlich.

<div class="component jsComponent">...</div>

Selecting multiple elements

Um mehrere Elemente auf einmal zu selektieren, verwenden wir document.querySelectorAll. Für das selector Objekt gelten dieselben Regeln wie für document.querySelector(selector).
querySelectorAll gibt eine NodeList zurück. Eine NodeList ist eine Liste mit “Knoten”. Mehr dazu siehe unter NodeLists vs. Array

const elements = document.querySelectorAll(selector);

// oft ist es besser, die NodeList gleich in einen Array umzuwandeln:
const elements = Array.from(document.querySelectorAll(selector));

Nodes vs. Elements

Das DOM ist wie ein Baum aufgebaut:
document
-> root element: <html>
------|—element: <head>
------|---------|—element: <title>
------|-------------------|—node/text: "My Title"
------|—element: <body>
----------------|—element: <h1>
----------------|---------|—node/text: "A Heading"
----------------|—element: <a>—node/attribute: href
--------------------------|—node/text: "Link text"

<html> ist ein Knoten und ein Element
<head> ist ein Knoten und ein Element
<title> ist ein Knoten und ein Element
My title ist ein Knoten (Text, Blatt vom Baum)
<body> ist ein Knoten und ein Element
<h1> ist ein Knoten und ein Element
"A Heading" ist ein Konten (Text, Blatt vom Baum)
<a> ist ein Knoten und ein Element
href ist ein Knoten (Attribut, Blatt vom Baum)
"Link text" ist ein Knoten (Text, Blatt vom Baum)

Ergo: alles ist ein Knoten, aber nur (HTML)-Elemente sind Elemente.

Nodes

Nodes haben Eigenschaften und Methoden, die meisten werden nicht verwendet, außer diesen beiden:

Node.parentElement: gibt das Elternelement dieses Knotens zurück. Wenn der Knoten kein Elternelement hat oder der Elternteil kein Element ist, wird null zurückgegeben.
<html> steht an erster Stelle im DOM, dieser Knoten hat kein Elternelement, daher ist html.parentElement gleich null.
Node.textContent: gibt (oder setzt) den Textinhalt eines Elements und all seiner Nachfahren.

Elements

Elemente sind ein spezieller Typ von Knoten, daher verfügen sie über alle Eigenschaften und Methoden, die die Knoten auch haben. Darüber hinaus haben Elemente eigene Eigenschaften und Methoden, die oft verwendet (und in den nächsten Kapiteln erklärt) werden.