dojo.NodeList-traverse
| Status: | Draft | @H_502_21@
|---|---|
| Version: | 1.0 | @H_502_21@
| Project owner: | James Burke | @H_502_21@
| Available: | since 1.4 | @H_502_21@
Method extensions to dojo.NodeList /dojo.query for traversing the DOM. These methods are intended to match the API naming and behavior as the similarly named methods in jQuery.
Introduction
Doing a dojo.require(“dojo.NodeList-traverse”) will add some addition methods to dojo.NodeList (the return object from a dojo.query call) that allow easier traversal of the DOM as it relates to the nodes in the dojo.NodeList.
@H_404_61@Usage
Here is a simple example showing how dojo.NodeList-traverse adds a “children” method to dojo.NodeList that can be called via the normal method chaining done with a dojo.query result:
1 2 3 4 5 6@H_404_61@ |
dojo
.
require
(
"dojo.NodeList-traverse"
);
//Grabs all child nodes of all divs
//and returns a dojo.NodeList object
//to allow further chaining operations
dojo
.
query
(
"div"
).
children
();
@H_404_61@ |
@H_502_21@
Methods added by dojo.NodeList-traverse
children
Returns all immediate child elements for nodes in this dojo.NodeList. Optionally takes a query to filter the child elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
1 2 3 4 5 6 7@H_404_61@ |
<div
class=
"container"
>
<div
class=
"red"
>
Red One</div>
Some Text
<div
class=
"blue"
>
Blue One</div>
<div
class=
"red"
>
Red Two</div>
<div
class=
"blue"
>
Blue Two</div>
</div>
@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the four child divs in a dojo.NodeList: dojo . query ( ".container" ). children (); //This code returns the two divs that have the class "red" in a dojo.NodeList: dojo . query ( ".container" ). children ( ".red" );@H_404_61@ |
@H_502_21@
closest
Returns closest parent that matches query, including current node in this dojo.NodeList if it matches the query. Optionally takes a query to filter the closest nodes.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
1 2 3 4@H_404_61@ |
dojo
.
require
(
"dojo.NodeList-traverse"
);
//This code returns the div with class "container" in a dojo.NodeList:
dojo
.
query
(
".red"
).
closest
(
".container"
);
@H_404_61@ |
@H_502_21@
parent
Returns immediate parent elements for nodes in this dojo.NodeList. Optionally takes a query to filter the parent elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
1 2 3 4 5 6@H_404_61@ |
<div
class=
"container"
>
<div
class=
"red"
>
Red One</div>
<div
class=
"blue first"
><span
class=
"text"
>
Blue One</span></div>
<div
class=
"red"
>
Red Two</div>
<div
class=
"blue"
><span
class=
"text"
>
Blue Two</span></div>
</div>
@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class "blue" in a dojo.NodeList: dojo . query ( ".text" ). parent (); //This code returns the one div with class "blue" and "first" in a dojo.NodeList: dojo . query ( ".text" ). parent ( ".first" );@H_404_61@ |
@H_502_21@
parents
Returns all parent elements for nodes in this dojo.NodeList. Optionally takes a query to filter the parent elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class "blue" and the div with class "container" in a dojo.NodeList: dojo . query ( ".text" ). parents (); //This code returns the one div with class "container" in a dojo.NodeList: dojo . query ( ".text" ). parents ( ".first" );@H_404_61@ |
@H_502_21@
siblings
Returns all sibling elements for nodes in this dojo.NodeList. Optionally takes a query to filter the sibling elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "red" > Red One</div> Some Text <div class= "blue first" > Blue One</div> <div class= "red" > Red Two</div> <div class= "blue" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
1 2 3 4 5 6 7 8@H_404_61@ |
dojo
.
require
(
"dojo.NodeList-traverse"
);
//This code returns the two div with class "red" and the other div
//with class "blue" that does not have "first". in a dojo.NodeList:
dojo
.
query
(
".first"
).
siblings
();
//This code returns the two div with class "red" in a dojo.NodeList:
dojo
.
query
(
".first"
).
siblings
(
".red"
);
@H_404_61@ |
@H_502_21@
next
Returns the next element for nodes in this dojo.NodeList. Optionally takes a query to filter the next elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "red" > Red One</div> Some Text <div class= "blue first" > Blue One</div> <div class= "red" > Red Two</div> <div class= "blue last" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the div with class "red" and has innerHTML of "Red Two" in a dojo.NodeList: dojo . query ( ".first" ). next (); //This code does not match any nodes so it returns an empty dojo.NodeList: dojo . query ( ".last" ). next ( ".red" );@H_404_61@ |
@H_502_21@
nextAll
Returns all sibling elements that come after the nodes in this dojo.NodeList. Optionally takes a query to filter the sibling elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "red" > Red One</div> Some Text <div class= "blue first" > Blue One</div> <div class= "red next" > Red Two</div> <div class= "blue next" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class of "next": dojo . query ( ".first" ). nextAll (); //This code returns the one div with class "red" and innerHTML "Red Two". dojo . query ( ".first" ). nextAll ( ".red" );@H_404_61@ |
@H_502_21@
prev
Returns the prevIoUs element for nodes in this dojo.NodeList. Optionally takes a query to filter the prevIoUs elements.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the div with class "red" and has innerHTML of "Red One" in a dojo.NodeList: dojo . query ( ".first" ). prev (); //This code does not match any nodes so it returns an empty dojo.NodeList: dojo . query ( ".first" ). prev ( ".blue" );@H_404_61@ |
@H_502_21@
prevAll
Returns all sibling elements that come before the nodes in this dojo.NodeList. Optionally takes a query to filter the prevIoUs elements.
The returned nodes will be in reverse DOM order -- the first node in the list will be the node closest to the original node/NodeList.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "red prev" > Red One</div> Some Text <div class= "blue prev" > Blue One</div> <div class= "red second" > Red Two</div> <div class= "blue last" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class of "prev": dojo . query ( ".first" ). prevAll (); //This code returns the one div with class "red prev" and innerHTML "Red One": dojo . query ( ".first" ). prevAll ( ".red" );@H_404_61@ |
@H_502_21@
andSelf
Adds the nodes from the prevIoUs dojo.NodeList to the current dojo.NodeList.
.end() can be used on the returned dojo.NodeList to get back to the original dojo.NodeList.
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "red prev" > Red One</div> Some Text <div class= "blue prev" > Blue One</div> <div class= "red second" > Red Two</div> <div class= "blue" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class of "prev",as well as the div with class "second": dojo . query ( ".second" ). prevAll (). andSelf ();@H_404_61@ |
@H_502_21@
first
Returns the first node in this dojo.NodeList as a dojo.NodeList.
This method is provided due to a difference in the Acme query engine used by default in Dojo. The Acme engine does not support ":first" queries,since it is not part of the CSS3 spec. This method can be used to give the same effect. For instance,instead of doing dojo.query("div:first"),you can do dojo.query("div").first().
Example
Assume a DOM created by this markup:
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the div with class "blue" and "first" in a dojo.NodeList: dojo . query ( ".blue" ). first ();@H_404_61@ |
@H_502_21@
last
Returns the last node in this dojo.NodeList as a dojo.NodeList.
This method is provided due to a difference in the Acme query engine used by default in Dojo. The Acme engine does not support ":last" queries,instead of doing dojo.query("div:last"),you can do dojo.query("div").last().
Example
Assume a DOM created by this markup:
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the last div with class "blue" in a dojo.NodeList: dojo . query ( ".blue" ). last ();@H_404_61@ |
@H_502_21@
even
Returns the even nodes in this dojo.NodeList as a dojo.NodeList.
This method is provided due to a difference in the Acme query engine used by default in Dojo. The Acme engine does not support ":even" queries,instead of doing dojo.query("div:even"),you can do dojo.query("div").even().
Example
Assume a DOM created by this markup:
<div class= "container" > <div class= "interior red" > Red One</div> <div class= "interior blue" > Blue One</div> <div class= "interior red" > Red Two</div> <div class= "interior blue" > Blue Two</div> </div>@H_404_61@ |
@H_502_21@
dojo . require ( "dojo.NodeList-traverse" ); //This code returns the two divs with class "blue" in a dojo.NodeList: dojo . query ( ".interior" ). even ();@H_404_61@ |
@H_502_21@
odd
Returns the odd nodes in this dojo.NodeList as a dojo.NodeList.
This method is provided due to a difference in the Acme query engine used by default in Dojo. The Acme engine does not support ":odd" queries,instead of doing dojo.query("div:odd"),you can do dojo.query("div").odd().
Example
Assume a DOM created by this markup: