The TreeWalkerviewView
is an interactive UI sample that displays the DOM
tree. It show the progress of the tree traversal by moving the selection within the
DOM tree. Buttons act as a control panel, allowing the user to interactively
traverse the tree, remove nodes, add nodes, and view the results immediately in
the tree.
The TreeWalkerviewView
uses an example filter,
NameNodeFilter
, that can be controlled from the UI and a
DOMTreeFull
class that displays the full DOM tree
with all the nodes.
The controls are called through to to the corresponding
TreeWalker
function. If you are familiar with the DOM
Level 2 Traversal specification, these controls are
fairly easy to understand.
| | | | Document Order Traversal Group | | | | |
|
|
- Next - calls the
next() functions and selects
the next in the tree.
- Previous - calls the
previous() function a and
selects the previous node in the DOM tree.
|
|
|
Parent, Previous Sibling, Next Sibling, First Child, Last Child - call the
corresponding function in TreeWalker and show the result as a selected Node.
|
|
|
- current - set the current node to the selected node.
- remove - remove the selected node and update the tree.
You must press a button to see next or previous node selection.
- add - add a text node.
You must press a button to see next or previous node selection.
|
|
|
createNodeTreeWalker - calls the factory
method to create a new TreeWalker with the
corresponding whatToShow and NodenameFilter
settings. The selected node becomes the TreeWalker root.
whatToShow - you can singly or multiply select
these values by pressing the control key and the
TreeWalker is constrained to these types.
NodeNameFilter - an empty string is
converted to null and given to the
NodeNameFilter example filter class provided.
- An empty string (null) matches ALL nodes.
- A non-empty string is forced to match node names.
|