Abfragen des DOM

Einführung in das Abfragen des DOM

Das Abfragen des DOM beinhaltet das Auswählen und Zugreifen auf bestimmte Elemente im Dokument, damit Sie diese manipulieren oder mit ihnen interagieren können. JavaScript bietet mehrere Methoden zum Abfragen von Elementen, jede mit ihrem eigenen Anwendungsfall und Verhalten.

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 innerhalb des Dokuments eindeutig sein sollen.
Anwendungsfall: Am besten geeignet, um ein bestimmtes Element auszuwählen, wenn Sie dessen ID kennen.
Rückgabewert: Ein einzelnes Element oder null, wenn kein Element gefunden wird.

9
1
2
3
4
5
6
// 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 von Elementen zurück.
Anwendungsfall: Nützlich, wenn Sie mehrere Elemente mit derselben Klasse auswählen müssen.
Rückgabewert: Eine Live-HTMLCollection der übereinstimmenden Elemente, die sich aktualisiert, wenn sich das DOM ändert.
Einschränkungen: Kann Array-Methoden nicht direkt verwenden; muss bei Bedarf in ein Array konvertiert werden.

9
1
2
3
4
5
6
7
8
9
// 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 nach ihrem Tag-Namen (z.B. div, p) aus und gibt eine Live-HTMLCollection zurück.
Anwendungsfall: Ideal zum Auswählen aller Elemente eines bestimmten Typs.
Rückgabe: Eine Live-HTMLCollection von Elementen.
Einschränkungen: Unspezifisch, da es alle Elemente eines gegebenen Tags im Kontext auswählt.

99
1
2
3
4
5
6
7
8
9
10
// 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 jedes gültigen CSS-Selektors zur Suche nach Elementen.
Anwendungsfall: Hervorragend zum Auswählen des ersten Treffers eines CSS-Selektors.
Rückgabe: Das erste übereinstimmende Element oder null, wenn kein Treffer gefunden wird.

9
1
2
3
4
5
6
7
8
// 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 aktualisiert es sich nicht dynamisch, wenn sich das DOM ändert.
Anwendungsfall: Perfekt zum Auswählen mehrerer Elemente mit komplexen Selektoren.
Rückgabe: Eine statische NodeList von Elementen, die sich nicht automatisch aktualisiert.

9
1
2
3
4
5
6
7
8
9
// 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ückgabetypen

Live- vs. Statische Sammlungen

CSS-Selektoren

Leistung

Praktisches Beispiel: Formularvalidierung

Lassen Sie uns diese Methoden in einem praktischen Szenario kombinieren: Hervorheben ungültiger Formularfelder mithilfe von Klassen.

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