## Elemente aus dem DOM Abfragen

Wir kennen nun alle wichtigen JavaScript Features um die erste wichtige API innerhalb des Browsers kennen zu lernen: Die DOM-API.

Mithilfe dieser können wir mit dem HTML-Dokuments selbst interagieren: Elemente suchen, modifizieren, neue Elemente hinzufügen und Elemente auch wieder löschen.

Alle Relevanten Funktionen sind in dem globalen Objekt `document` beinhaltet.

`document.getElementById(id)`

Sucht im Dokument nach einem HTML-Element mit der Angegebenen ID.

Wenn kein Element gefunden wird, liefert die Funktion `null`.

Gibt es mehrere Elemente mit der gleichen ID, wird das erste gefundene geliefert.

`document.querySelector(selector)`

Sucht im Dokument nach einem HTML-Element mit der Angegebenen CSS-Query.

Wenn kein Element gefunden wird, liefert die Funktion `null`.

Gibt es mehrere Dokumente die dem Selektor matchen, wird das zuerst gefundene Element zurück geliefert.

`document.querySelectorAll(selector)`

Ähnlich zu `querySelector`, liefert aber alle gefundenen Elemente in einem Array-Ähnlichen Konstrukt zurück (Static NodeList).

Gibt es keine Elemente, ist dieses Array leer.

Die Elemente im Array werden nicht dynamisch aktualisiert.

Mit `Array.from(NodeList)` kann die NodeList in ein normales Array überführt werden.

### "Tree-Walking"

Das Objekt `document` beinhaltet auch direkten Zugriff auf das HTML-Dokument.

In `document.body` ist die Referenz zum `body`-Tag des HTML-Dokumentes zu finden.

Von hier aus (oder von jedem anderen HTML-Element) kann man nun den Document-Tree Auf-, Ab- und Be-Wandern.

`element.nextSibling & element.previousSibling`

Zugriff auf das nächste / vorherige Element in der gleichen Ebene (gleiches Parent)

`element.children[]`

Zugriff auf die Kind-Elemente eines Elementes

`element.parentNode & element.parentElement`

Zugriff auf das Parent-Element