Selection function for JavaScript framework: DOM traversal

DOM Traversal

It is useful to look up elements based on IDs, element types, and class names, but what if you want to find elements based on where they are located in the DOM tree? In other words, you have a given element, and you want to find its parent element, one of its child elements, its last or next node sibling node. For example, use the following fragmented HTML code:

Manifest 1:html fragment (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 illustrate where each element node is located in the DOM tree. In this instance, the table element is the root element, with two child nodes thead and tbody. The THEAD element has a TR child node, and TR has three children-all th elements. The TBODY element has two TR child nodes, each with three children per TR node. Further including child nodes in the third node of each of these lines is a two link mark.

As you know, you can use a JavaScript framework 's selection function to easily select an element through the ID. In this instance, two elements have IDs, which are the TR elements with IDs of row-001 and row-002 respectively. Using 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 element based type or class uses selectors to get elements. In this example, you can use the following syntax to get all the TD elements.

var allcells = $$ (' TD ');

The main problem with changing the code is that it returns every TD element. But what if you just want to get all the TD elements of TR with ID row-001? This is where the DOM traversal function works. First, let's use prototypes to select all the children of TR with ID row-001.

var firstrowcells = therow.childelements ();

This returns an array of all the child elements of the Therow variable (the one you originally set with the ID row-001 tr).

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

var Firstrowfirstcell = Therow.down ();

It's so easy! This particular method of use is equivalent to:

var Firstrowfirstcell = therow.childelements () [0];

You can also say this:

var Firstrowfirstcell = therow.down (0);

The index of JavaScript is zero-based, so the above statement mainly tells JavaScript to select the first child element. To select a second child element (the cell contains an e-mail address joe@joelennon.ie), you can use this:

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 in the first cell. Therefore, you can use the following statement:

var Firstrowsecondcell = Firstrowfirstcell.next ();

As with the down () function, select a third cell that you can use.

var Firstrowthirdcell = Firstrowfirstcell.next (1);

In addition to using indexes to find specific nodes, the prototype library can also use CSS selector syntax. In Listing 1, we'll find a second link ("delete" link) that contains the details of the Jill Mac Sweeney.

var Secondrowsecondlink = $ (' row-002 '). Down (' a ', 1);

In this example, the $ function is used to find the row with the ID row-002, traversing down to the second descendant a element (anchor point).

Some frameworks also allow the "daisy-chained" traversal function, which means you can connect to each other to traverse commands. In the example above, another way to express the prototype library is this:

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, the daisy chain allows you to connect multiple DOM traversal statements. In fact, the above example actually chooses the TR element with ID row-001, so the daisy chain is back where it started.