Node Traverse / Access page elements based on its relationship

We have learnt, how to access an element in the page using its ID, Tag name and class in Lesson-2. In this chapter we will see how to access the DOM elements (nodes) based on its relationship with each other. This in technical terms we call it as traverse. So keep in mind to use this methods, it is required to include NodeList-traverse.

In dojo, hope you are aware how to include the module. It is simple,
dojo.require("dojo.NodeList-traverse");

Methods:

  1. parent - to get the parent node of a particular node
  2. parents - to get all the parents of a particular node
  3. children
  4. siblings
  5. next
  6. nextAll
  7. prev
  8. prevAll
  9. closest
  10. andSelf - usually the above all methods will get the nodes accordingly without including the particular node. By using this method, the pointed node will also get included in the list of nodes selected.

    The above methods, as the name indicates, brings up the list of nodes related to a particular node. But there are few more methods defined by NodeList-traverse, which on my view work as filter. They are
  11. first
  12. last
  13. even
  14. odd
Each methods are explained with examples in dojotoolkit in this page (http://dojotoolkit.org/reference-guide/dojo/NodeList-traverse.html#dojo-nodelist-traverse). So I feel it is not required to give examples for all again here. If you have any questions or if you need any help on this topic, please post in comments.

The key point to keep in mind to use this method is to add dojo.require("dojo.NodeList-traverse");  in your code.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tech Prem - Dojo Lesson-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.ready(function()
{
dojo.require("dojo.NodeList-traverse");
dojo.require("dojo.NodeList-manipulate");

dojo.query("#parent1").onclick(function(){
dojo.query(".result").text("My Childrens are: "+dojo.query(".parent_1").children().attr("class"));

});
dojo.query("#child3").onclick(function(){
dojo.query(".result").text("My parent is: "+dojo.query(".child_3").parent().attr("class"));
});
dojo.query("#showall").onclick(function(){
dojo.query(".result").text("My parent are: "+dojo.query(".child_3").parents().attr("class"));
});
 
});
</script>
</head>
<body>
<div class="parent_1">
<div class="child_1">I am child_1</div>
<div class="child_2">I am child_2, I have another child <br/>
<div class="child_3">&nbsp;&nbsp;&nbsp;&nbsp;I am child_3, I am child of child_2</div>
</div>
</div>
<input type="button" id="parent1" value="Show list of parent - 1's children"/>
<input type="button" id="child3" value="Show child-3's parent"/>
<input type="button" id="showall" value="show child-3's all parent" />
<p>Results</p>
<div class="result"></div>
</body>
</html>

Code:


Labels:

No comments:

Post a Comment

Please post your comments to help you and others better.

Subscribe to: Post Comments (Atom)