2.1 Methoden zum Zugriff auf Elemente
Die Navigation durch das DOM (Document Object Model) ist eine wichtige Aufgabe bei der Arbeit mit Webdokumenten. JavaScript bietet viele Methoden zum Suchen und Zugreifen auf Dokumentelemente. Diese Methoden ermöglichen es Entwicklern, die benötigten Elemente leicht zu finden und zu manipulieren.
1. Methode getElementById()
Die Methode getElementById() gibt das Element zurück, das das id-Attribut mit dem angegebenen Wert hat. Dies ist eine der einfachsten und am häufigsten verwendeten Methoden.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<div id="content">Dies ist der Inhalt</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Gibt aus: Dies ist der Inhalt
</script>
</body>
</html>
2. Methode getElementsByClassName()
Die Methode getElementsByClassName() gibt eine Sammlung aller Elemente zurück, die die angegebene Klasse haben. Die Sammlung ist "lebendig", das bedeutet, dass sie sich automatisch aktualisiert, wenn sich das DOM ändert.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<p class="text">Absatz 1</p>
<p class="text">Absatz 2</p>
<p class="text">Absatz 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Gibt aus: 3
</script>
</body>
</html>
3. Methode getElementsByTagName()
Die Methode getElementsByTagName() gibt eine Sammlung aller Elemente mit dem angegebenen Tag zurück. Diese Sammlung ist ebenfalls "lebendig".
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Gibt aus: 3
</script>
</body>
</html>
4. Methode querySelector()
Die Methode querySelector() gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht. Dies ist eine sehr mächtige und flexible Methode zur Elementensuche.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<div class="container">
<p>Absatz 1</p>
<p class="highlight">Absatz 2</p>
<p>Absatz 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Gibt aus: Absatz 2
</script>
</body>
</html>
5. Methode querySelectorAll()
Die Methode querySelectorAll() gibt eine statische (nicht verändernde) Sammlung aller Elemente zurück, die dem angegebenen CSS-Selektor entsprechen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<div class="container">
<p>Absatz 1</p>
<p class="highlight">Absatz 2</p>
<p>Absatz 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Gibt aus: 3
</script>
</body>
</html>
2.2 Navigation durch Knoten
Das DOM bietet auch Methoden zur Navigation durch Knoten relativ zum aktuellen Element.
1. Eigenschaft parentNode
Die Eigenschaft parentNode gibt den Elternknoten des aktuellen Knotens zurück.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<div id="container">
<p>Absatz</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Gibt aus: container
</script>
</body>
</html>
2. Eigenschaft childNodes
Die Eigenschaft childNodes gibt eine Sammlung aller untergeordneten Knoten des aktuellen Knotens zurück, einschließlich Textknoten.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Gibt die Anzahl aller untergeordneten Knoten aus, einschließlich Textknoten
</script>
</body>
</html>
Du fragst dich vielleicht immer noch, warum die Ausgabe 7 ist?
Wie oben bereits erwähnt, gibt die Eigenschaft childNodes eine Sammlung aller untergeordneten Knoten des aktuellen Knotens zurück, einschließlich Textknoten (Leerzeichen, Zeichen, neue Zeilen usw.). Die HTML-Markierung enthält Leerzeichen und neue Zeilen zwischen den <li>-Elementen, die ebenfalls als separate Knoten betrachtet werden.
Im obigen Beispiel gibt es zwischen dem <ul>-Tag und dem ersten <li> eine neue Zeile (und möglicherweise ein Leerzeichen), die als Textknoten betrachtet wird. Dasselbe zwischen allen <li> und nach dem letzten <li>. Daher enthält childNodes anstelle der drei Listenelemente diese Textknoten, was zu einer Gesamtanzahl von 7 führt.
Um nur die Elemente zu erhalten (ohne Textknoten), kannst du die Eigenschaft children verwenden, die nur die untergeordneten Elemente zurückgibt:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Eigenschaften firstChild und lastChild
Die Eigenschaften firstChild und lastChild geben den ersten bzw. letzten untergeordneten Knoten zurück.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Du wunderst dich vielleicht, dass nichts in die Konsole ausgegeben wurde. Aber das ist nicht der Fall. Der letzte untergeordnete Knoten Element 1 und Element 3 (neue Zeile) wurden ausgegeben. Wenn du darauf reingefallen bist, solltest du dir Punkt 2 Eigenschaft childNodes noch einmal ansehen.
4. Eigenschaften nextSibling und previousSibling
Die Eigenschaften nextSibling und previousSibling geben den nächsten und vorhergehenden Knoten auf derselben Hierarchieebene zurück.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Gibt aus: Element 3
console.log(prev.textContent); // Gibt aus: Element 1 (wenn man Textknoten überspringt)
</script>
</body>
</html>
2.3 Navigation durch Elementenknoten
5. Eigenschaften nextElementSibling und previousElementSibling
Diese Eigenschaften geben den nächsten und vorhergehenden Elementenknoten zurück (überspringen Text- und Kommentarknoten).
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Gibt aus: Element 3
console.log(prev.textContent); // Gibt aus: Element 1
</script>
</body>
</html>
6. Eigenschaften firstElementChild und lastElementChild
Diese Eigenschaften geben den ersten und letzten untergeordneten Elementenknoten zurück (überspringen Text- und Kommentarknoten).
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Gibt aus: Element 1
console.log(last.textContent); // Gibt aus: Element 3
</script>
</body>
</html>
GO TO FULL VERSION