Einführung in das Abfragen des DOM

Das Abfragen des DOM umfasst das Auswählen und Zugreifen auf bestimmte Elemente im Dokument, um diese manipulieren oder mit ihnen interagieren zu können. JavaScript stellt verschiedene Methoden zum Abfragen von Elementen bereit, die jeweils eigene Anwendungsfälle und Verhaltensweisen besitzen.

GetElementById

getElementById wird verwendet, um ein einzelnes Element anhand seiner eindeutigen ID auszuwählen. Es ist eine der am häufigsten verwendeten Methoden, da IDs im Dokument eindeutig sein sollen.
Anwendungsfall: Am besten geeignet, um ein bestimmtes Element auszuwählen, wenn dessen ID bekannt ist.
Rückgabewert: Ein einzelnes Element oder null, falls kein Element gefunden wird.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName wählt Elemente anhand ihres Klassennamens aus und gibt eine Live-HTMLCollection der Elemente zurück.
Anwendungsfall: Nützlich, wenn mehrere Elemente mit derselben Klasse ausgewählt werden sollen.
Rückgabewert: Eine Live-HTMLCollection der passenden Elemente, die sich aktualisiert, wenn sich das DOM ändert.
Einschränkungen: Array-Methoden können nicht direkt verwendet werden; bei Bedarf muss eine Umwandlung in ein Array erfolgen.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName wählt Elemente anhand ihres Tag-Namens aus (z. B. div, p) und gibt eine Live-HTMLCollection zurück.
Anwendungsfall: Geeignet für die Auswahl aller Elemente eines bestimmten Typs.
Rückgabewert: Eine Live-HTMLCollection von Elementen.
Einschränkungen: Unspezifisch, da alle Elemente eines bestimmten Tags im Kontext ausgewählt werden.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector wählt das erste Element aus, das einem CSS-Selektor entspricht. Es ist vielseitig und ermöglicht die Verwendung beliebiger gültiger CSS-Selektoren zur Elementauswahl.
Anwendungsfall: Optimal, um das erste Element zu selektieren, das einem CSS-Selektor entspricht.
Rückgabewert: Das erste passende Element oder null, falls keine Übereinstimmung gefunden wird.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll wählt alle Elemente aus, die einem CSS-Selektor entsprechen, und gibt eine statische NodeList zurück. Im Gegensatz zu anderen Methoden wird diese Liste nicht dynamisch aktualisiert, wenn sich das DOM ändert.
Anwendungsfall: Ideal zur Auswahl mehrerer Elemente mit komplexen Selektoren.
Rückgabewert: Eine statische NodeList von Elementen, die sich nicht automatisch aktualisiert.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Unterschiede zwischen diesen Methoden

Rückgabewerte

Live- vs. statische Sammlungen

CSS-Selektoren

Leistung

Praktisches Beispiel: Formularvalidierung

Kombination dieser Methoden in einem praxisnahen Szenario: Hervorhebung ungültiger Formularfelder durch Klassen.

Die Methode getElementById wählt das Formularelement aus, während querySelectorAll alle Eingabefelder mit der Klasse .input-field abruft. Ein Ereignislistener für das "submit"-Ereignis des Formulars verhindert die Standardübermittlung und überprüft jedes Eingabefeld. Ist ein Feld leer, wird es mit einem roten Rahmen hervorgehoben; ausgefüllte Felder erhalten einen grünen Rahmen. Dies bietet dem Benutzer sofortiges visuelles Feedback.