jQuery Schnellstart / jQuery Schnellstart Modul 4 – Ausblick in die Zukunft
0%
In Bearbeitung

jQuery Schnellstart – jQuery Traversing

Du lernst in dieser Lektion, wie Du mit jQuery durch HTML DOM traversieren kannst.

Was ist Traversing überhaupt?

Die jQuery-Selektoren, die wir bisher gesehen haben, erlauben uns nur die Auswahl der Elemente unterhalb des DOM-Baums (Document Object Model).

Aber es gibt viele Vorkommnisse, bei denen Du ein Eltern-Element auswählen musst. Hier kommen die DOM-Traversing-Methoden von jQuery ins Spiel. Mit diesen Methoden können wir den DOM-Baum sehr leicht nach oben, unten und rund um den DOM-Baum herum durchlaufen.

DOM-Traversing ist eines der prominenten Features von jQuery. Um das Beste daraus zu machen, musst du nur die Beziehungen zwischen den Elementen in einem DOM-Baum verstehen.

Schauen wir uns dafür ein Code-Beispiel und dann eine visuelle Unterstützung an, um das besser zu verstehen.

Code-Beispiel:

<body>
  <div class="box">
	<h2>Hallo Überschrift!</h2>
	<p>Das ist ein <em>Text</em>.</p>
	<ul>
	  <li>List-Element 1</li>
	  <li>List-Element 2</li>
	</ul>
  </div>
</body>

Der HTML-Code im obigen Beispiel kann durch den folgenden DOM-Baum dargestellt werden:

Die oben gezeigte Darstellung zeigt die Eltern/Kind-Beziehungen zwischen den Elementen:

  • Das Element <body> ist der Elternteil des Elements <div> und ein Vorfahre von allem, was sich in ihm befindet. Das eingeschlossene Element <div> ist der Elternteil der Elemente <h2>, <p> und <ul> und ein Kind des Elements <body>.
  • Die Elemente <h2>, <p> und <ul> sind Geschwister, da sie den gleichen Elternteil haben.
  • Das Element <h2> ist ein Kind des Elements <div> und ein Nachkomme des Elements <body>. Dieses Element hat keine Kinder.
  • Das Element <p> ist der Elternteil des Elements <strong>, das Kind des Elements <div> und ein Nachkomme des Elements <body>. Das enthaltende <strong>-Element ist ein Kind dieses <p>-Elements und ein Abkömmling des <div>- und des <body>-Elements.
  • Genauso ist  <ul> das Eltern-Element des <li>-Elements, das Kind des <div>-Elements und ein Nachkomme des <body>-Elements. Die enthaltenden <li>-Elemente sind das Kind dieses <ul>-Elements und ein Abkömmling des <div>- und <body>-Elements. Außerdem sind die beiden <li>-Elemente Geschwister.

Fazit: Durchqueren des DOM-Baums

Jetzt hast du die logischen Beziehungen zwischen den Elementen in einem DOM-Baum verstanden. In den kommenden Lektionen wirst Du lernen, wie Du mithilfe von jQuery verschiedene Traversing-Operationen durchführen kannst, wie z.B. das Auf-, Ab- und Seiten-Traversing des DOM-Baums.

In der nächsten Lektion lernst du, wie du das oberste Elemente in einem DOM-Baum auswählst.