TreeWalker object
| 9 | ||||
Represents the result of the createTreeWalker method as a tree.
Note: The TreeWalker object is supported in Internet Explorer from version 9.
The elements of the resulting tree refer to the nodes in the document that fulfill the conditions specified for the createTreeWalker method.
An element (element1) is an ancestor of other element (element2) in the resulting tree if and only if the node referred to by the element1 is an ancestor of the node referred to by the element2 in the document tree.
An element (element1) precedes another element (element2) in the resulting tree if and only if the node referred to by the element1 precedes the node referred to by the element2 in the document tree.
The root, whatToShow, filter and expandEntityReferences properties of the TreeWalker object retrieve the settings that were specified earlier for the createTreeWalker method to create the TreeWalker object.
The other members can be used to navigate through the resulting tree.
The createNodeIterator method and the NodeIterator object are similar to the createTreeWalker method and the TreeWalker object.
The main difference is that the NodeIterator object represents the result as an ordered list not as a tree.Syntax:
Methods that return the object:
| • | object.createTreeWalker (rootNode, nodeType, filterFunction, entityRefExpansion) |
Related objects:
|
The base interface, through which you can add new functionalities to the TreeWalker object, is the TreeWalker interface.
Possible members:
Properties:
| Sets or retrieves a reference to the node where the pointer of the TreeWalker is currently positioned. | |||||||
| Returns a Boolean value that indicates whether the children of entity reference nodes are visible to the NodeIterator or TreeWalker object. | |||||||
| Returns the filtering that function belongs to the NodeIterator or TreeWalker object. | |||||||
| Returns the root element that was used to create the NodeIterator or TreeWalker object. | |||||||
| Returns an integer that identifies the types of nodes that can be shown by the current NodeIterator or TreeWalker object. |
Methods:
| firstChild | Finds the first child of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| lastChild | Finds the last child of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| nextNode | Finds the next node relative to the current node in the ordered list represented by the current NodeIterator object or in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| nextSibling | Finds the next sibling of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| parentNode | Finds the parent node of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| previousNode | Finds the previous node relative to the current node in the ordered list represented by the current NodeIterator object or in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. | ||||||
| previousSibling | Finds the previous sibling of the current node in the tree represented by the current TreeWalker object. If it exists, it will be made the current node and returned, else the current node is retained and null is returned. |
Example HTML code 1:
This example shows how to navigate through span elements with the TreeWalker object:
|
|
||||
<head> <script type="text/javascript"> function ElementChecker (node) { if (node.tagName.toLowerCase () == 'span') { return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_SKIP; } function FindMainSections () { var contElem = document.getElementById ("content"); if (document.createTreeWalker) { walker = document.createTreeWalker (contElem, NodeFilter.SHOW_ELEMENT, ElementChecker, false); // get the first matching node var node = walker.firstChild (); while (node) { alert ("The contents of the section:\n " + node.innerHTML); node = walker.nextSibling (); } } else { alert ("Your browser does not support the createTreeWalker method!"); } } </script> </head> <body> <div id="content"> <span> <b>1. Section</b><br /> <span> <b>1.1. Subsection</b><br /> </span> </span> <span> <b>2.Section</b><br /> </span> </div> <br /><br /> <button onclick="FindMainSections ()">Find the main sections with the TreeWalker object</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
External links:
User Contributed Comments