Zusammenfassung: DOM-Zugriffsmethoden

Welche Methoden können wir verwenden?

Wir haben dir gezeigt, wie du die folgenden Methoden verwenden kannst, um Elemente auf deiner Webseite zu finden:

Was geben diese zurück?

Zwei Methoden geben ein einzelnes Element zurück, getElementById und querySelector:

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Mathe ist cool";

Die Methoden getElementsByClassName und getElementsByTagName geben eine HTMLCollection, welche wie ein Array funktioniert, zurück. Diese Collection (Sammlung) "lebt", dies bedeutet, dass sie aktualisiert wird, wenn zusätzliche Elemente mit dem richtigen Tag- oder Klassennamen zum Dokument hinzugefügt werden.

var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

Die Methode querySelectorAll() gibt eine NodeList, welche ebenfalls wie ein Array funktioniert, zurück. Diese Liste ist aber "statisch", was bedeutet, dass die Liste nicht aktualisiert wird, selbst wenn der Webseite neue passende Elemente hinzugefügt werden. Höchstwahrscheinlich wirst du die Unterschiede zwischen den beiden Rückgabewerten nicht bemerken, aber es ist immer gut diese im Auge zu behalten.

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}

Mit Subqueries zugreifen

Sobald du ein Element gefunden hast, kanns du mit den soeben gezeigten Methoden Subqueries ausführen. Zum Beispiel:

// ermittle das Element mit dieser ID
var salsMotto = document.getElementById("salsMotto");
// finde die spans in diesem Element:
var mottoWords = salsMotto.getElementsByTagName("span");
// gib die Anzahl Elemente aus
console.log(mottoWords.length);

DOM-Traversierung

Ein anderer Weg auf die Elemente zuzugreifen ist das "Traversieren" des DOM-Baumes. Jedes Element hat Eigenschaften, welche auf seine Nachbar- und Unterlemente zeigen.

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

Zum Beispiel:

var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}

Diese Eigenschaften sind nur auf Element-Nodes und nicht auf Text-Nodes verfügbar. Damit du ein Element traversieren kannst, überprüfe seine Eigenschaften nodeType/nodeValue. Sehr wahrscheinlich wirst du die DOM-Traversierung nicht verwenden, aber es ist eine weitere Möglichkeit die dir zur Verfügung steht.

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.