Comparison of JavaScript frameworks (II)

DOM Traversal

Searching for elements based on ID, element type, and class name is very useful, but what if you want to find elements based on their location in the DOM tree? In other words, you have a given element. You want to find its parent element, one of its child elements, and its previous or next node sibling node. For example, use the following piece of HTML code:

Listing 1: HTML fragments (a table)

<Table>
<Thead>
<Tr>
<Th> Name </th>
<Th> Email Address </th>
<Th> Actions </th>
</Tr>
</Thead>
<Tbody>
<Tr id = "row-001">
<Td> Joe Lennon </td>
<Td> joe@joelennon.ie </td>
<Td> <a href = "#"> Edit </a>
<A href = "#"> Delete </a> </td>
</Tr>
<Tr id = "row-002">
<Td> Jill Mac Sweeney </td>
<Td> jill@example.com </td>
<Td> <a href = "#"> Edit </a>
<A href = "#"> Delete </a> </td>
</Tr>
</Tbody>
</Table>
Listing 1 uses indentation to describe the position of each element node in the DOM tree. In this example, the table element is the root element and has two subnodes thead and tbody. The thead element has a tr subnode, And the tr has three children-all th elements. The tbody element has two tr subnodes, each of which has three children. The third node in each row contains a subnode, which is marked with two links.

As you know, you can use a JavaScript framework selection function to easily select an element through ID. In this instance, two elements have IDs, which are tr elements with IDs row-001 and row-002 respectively. Use the Prototype library to select the first tr. You can use the following code:

Var theRow = $('row-001 ');
In the previous chapter, you also learned that the selector is used to obtain elements based on the element type or class. In this example, you can use the following syntax to obtain all td elements.

Var allCells =$ $ ('td ');
The main problem with code modification is that it returns every td element. However, what if you only want to get all the td elements of tr whose ID is row-001? This is where the DOM traversal function plays a role. First, let's use the prototype to select all sub-levels of tr with ID row-001.

Var firstRowCells = theRow. childElements ();
This will return an array of all child elements of the theRow variable (the tr with the ID you initially set is row-001.

Next, let's assume that you only want to get the first child element of the row. In this example, the td element that contains the "Joe Lennon" text. To do this, use the following statement:

Var firstRowFirstCell = theRow. down ();
It's really simple! This specific usage method is equivalent:

Var firstRowFirstCell = theRow. childElements () [0];
It can also be expressed as follows:

Var firstRowFirstCell = theRow. down (0 );
The index of JavaScript starts from scratch, so the preceding statement mainly tells JavaScript to select the first child element. To select the second child element (the cell contains the e-mail address joe@joelennon.ie), you can use:

Var firstRowSecondCell = theRow. down (1 );
Alternatively, you can browse the DOM between sibling nodes. In this example, the second cell is the next sibling node of the first cell. Therefore, you can use the following statement:

Var firstRowSecondCell = firstRowFirstCell. next ();
Like the down () function, you can select the third cell.

Var firstRowThirdCell = firstRowFirstCell. next (1 );
In addition to using indexes to find specific nodes, the Prototype library can also use the CSS selector syntax. In listing 1, we need to find the second link that contains the details of the Jill Mac Sweeney ("delete" link ).

Var secondRowSecondLink = $ ('row-002'). down ('A', 1 );
In this example, use the $ function to find the row with the ID row-002 and traverse down to the second descendant element a (Anchor ).

Some frameworks also allow the "Chrysanthemum chain" traversal function, which means you can connect to each other to traverse commands. In the above example, another expression of the Prototype library is as follows:

Var secondRowSecondLink = $ ('row-002'). down ('A'). next ();
Take a look at the following example:

Var domTraversal = $ ('row-001'). down (). up (). next (). previous ();
As you can see, chrysanthemum links allow you to connect multiple DOM traversal statements. In fact, in the above example, the tr element with the ID row-001 is selected, so the chrysanthemum chain returns to the starting point.

Reprint address: http://www.denisdeng.com /? P = 708

Address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html