DOM-Durchquerung
Das Suchen von Elementen anhand der ID, des Elementtyps und des Klassennamens ist sehr nützlich. Was aber, wenn Sie ein Element anhand seiner Position im DOM-Baum finden möchten? Mit anderen Worten: Sie haben ein bestimmtes Element und möchten sein übergeordnetes Element, eines seiner untergeordneten Elemente und seinen vorherigen oder nächsten Geschwisterknoten finden. Nehmen Sie zum Beispiel den folgenden fragmentarischen HTML-Code:
Listing 1: HTML-Fragment (eine Tabelle)
<Tabelle>
<thead>
<tr>
<th>Name</th>
<th>E-Mail-Adresse</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tr id="row-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Bearbeiten</a>
<a href="#">Löschen</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Bearbeiten</a>
<a href="#">Löschen</a></td>
</tr>
</tbody>
</table>
Listing 1 verwendet Einrückungen, um die Position jedes Elementknotens im DOM-Baum anzugeben. In diesem Beispiel ist das Tabellenelement das Stammelement und verfügt über zwei untergeordnete Knoten, thead und tbody. Das thead-Element hat einen untergeordneten tr-Knoten und tr hat drei untergeordnete Knoten – alle th-Elemente. Das tbody-Element hat zwei untergeordnete tr-Knoten, und jeder tr-Knoten hat drei untergeordnete Knoten. Der dritte Knoten in jeder Zeile oben enthält außerdem untergeordnete Knoten, bei denen es sich jeweils um zwei Link-Tags handelt.
Wie Sie wissen, können Sie mithilfe der Auswahlfunktion eines JavaScript-Frameworks problemlos ein Element anhand der ID auswählen. In diesem Beispiel gibt es zwei Elemente mit IDs, bei denen es sich um tr-Elemente mit den IDs row-001 und row-002 handelt. Um den ersten tr mithilfe der Prototype-Bibliothek auszuwählen, können Sie den folgenden Code verwenden:
var theRow = $('row-001');
Im vorherigen Kapitel haben Sie auch erfahren, wie Sie mit Selektoren Elemente basierend auf ihrem Typ oder ihrer Klasse abrufen. In diesem Beispiel können Sie die folgende Syntax verwenden, um alle td-Elemente abzurufen.
var allCells = $$('td');
Das Hauptproblem bei der Codeänderung besteht darin, dass jedes td-Element zurückgegeben wird. Aber was ist, wenn Sie nur alle td-Elemente von tr mit der ID row-001 erhalten möchten? Hier kommen DOM-Traversal-Funktionen ins Spiel. Lassen Sie uns zunächst den Prototyp verwenden, um alle untergeordneten Elemente von tr mit der ID row-001 auszuwählen.
var firstRowCells = theRow.childElements();
Dadurch wird ein Array aller untergeordneten Elemente der Variablen „Row“ zurückgegeben (das tr, das Sie ursprünglich mit der ID row-001 festgelegt haben).
Nehmen wir als Nächstes an, dass Sie nur das erste untergeordnete Element der Zeile abrufen möchten. In diesem Fall ist das das td-Element, das den Text „Joe Lennon“ enthält. Verwenden Sie dazu die folgende Anweisung:
var firstRowFirstCell = theRow.down();
So einfach! Diese spezifische Verwendung entspricht:
var firstRowFirstCell = theRow.childElements()[0];
Man kann es auch so ausdrücken:
var firstRowFirstCell = theRow.down(0);
JavaScript-Indizes beginnen bei Null, daher weist die obige Anweisung JavaScript grundsätzlich an, das erste untergeordnete Element auszuwählen. Um das zweite untergeordnete Element (die Zelle mit der E-Mail-Adresse [email protected] ) auszuwählen, würden Sie Folgendes verwenden:
var firstRowSecondCell = theRow.down(1);
Alternativ können Sie das DOM zwischen Geschwisterknoten durchsuchen. In diesem Beispiel ist die zweite Zelle das nächste Geschwister der ersten Zelle. Daher können Sie die folgende Anweisung verwenden:
var firstRowSecondCell = firstRowFirstCell.next();
Genau wie die Funktion down() funktioniert auch die Auswahl der dritten Zelle.
var firstRowThirdCell = firstRowFirstCell.next(1);
Neben der Verwendung von Indizes zum Auffinden bestimmter Knoten kann die Prototype-Bibliothek auch die CSS-Selektorsyntax verwenden. In Listing 1 suchen wir nach dem zweiten Link (dem „Entfernen“-Link), der die Details von Jill Mac Sweeney enthält.
var secondRowSecondLink = $('row-002').down('a', 1);
In diesem Beispiel verwenden Sie die Funktion $, um die Zeile mit der ID row-002 zu finden, indem Sie bis zum zweiten Nachkommen eines Elements (dem Anker) durchlaufen.
Einige Frameworks ermöglichen auch die „Daisy-Chaining“-Traversal-Funktionalität, was bedeutet, dass Sie Traversal-Befehle miteinander verbinden können. Im obigen Beispiel lautet ein weiterer Ausdruck der Prototype-Bibliothek wie folgt:
var secondRowSecondLink = $('row-002').down('a').next();
Schauen Sie sich das folgende Beispiel an:
var domTraversal = $('row-001').down().up().next(). previous();
Wie Sie sehen können, können Sie mit Daisy-Chaining mehrere DOM-Traversal-Anweisungen verbinden. Tatsächlich wird im obigen Beispiel tatsächlich das tr-Element mit der ID row-001 ausgewählt, sodass die Daisy-Chain wieder dort ist, wo sie begonnen hat.
Nachdruckadresse: http://www.denisdeng.com/?p=708
Ursprüngliche Adresse: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html