Auf DOM Objekte zugreifen

Initialer Zugriff über globale Variable 'document'

document Objekt beinhaltet das vom Browser geladene HTML Dokument
-> document in Konsole in Browser Entwicklungsumgebung eingeben
bietet Funktionen um auf Elemente im DOM zuzugreifen und neue Elemente zu erzeugen
-> document.get, document.create in Konsole eingeben

Elemente im DOM gezielt finden

Zugriff über document oder über bereits gefundenes Element (außer bei head/body/html)

Finde Element(e)...	JavaScript	Beschreibung
head/body/html	document.head/body/documentElement	gibt das HTMLHeadElement/HTMLBodyElement/ HTMLElement zurück
über Tag-Name	.getElementsByTagName(tag)	gibt HTMLCollection aller Elemente mit angegebenem tag zurück
über id-Attribut	.getElementById(id)	gibt Element mit angegebener id zurück
über class-Attribut	.getElementsByClassName(class)	gibt HTMLCollection aller Elemente mit angegebener class zurück
über css Selektor	.querySelector(cssQuery)	gibt erstes Element zurück, das der cssQuery entspricht
über css Selektor	.querySelectorAll(cssQuery)	gibt NodeList aller Elemente zurück, die der cssQuery entsprechen

HTML<div id="testID" class="blue">
  <p class="blue">Test</p>
  <p>Test2</p>
</div>
<p>Test3</p>

JavaScriptlet body = document.body;
let testId = document.getElementById('testID');
let pElements = testId.getElementsByTagName('p');
let secondPElement = pElements[1];
let blueClassElements = document.getElementsByClassName('blue');
let firstPAndBlue = testId.querySelector('p.blue');
let allPAndBlue = document.querySelectorAll('p.blue');
console.log(body);
console.log(testId);
console.log(pElements);
console.log(secondPElement);
console.log(blueClassElements);
console.log(firstPAndBlue);
console.log(allPAndBlue);

Node/Element Eigenschaften um durch den DOM zu navigieren

Element(e)	Node(s)	Beschreibung
.children	.childNodes	gibt eine HTMLCollection/NodeList von allen Kind Elementen/Knoten zurück
.firstElementChild	.firstChild	gibt erstes Kind Element/Node zurück
	.parentNode	gibt den Eltern Node zurück

HTMLCollection: Sammlung von DOM Element Objekten; live (automatisches Update bei Änderungen im DOM)

NodeList Sammlung von Knoten Objekten; kann live oder statisch sein