TreeWalker

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheTreeWalker object represents the nodes of a document subtree and a position within them.

ATreeWalker can be created using theDocument.createTreeWalker() method.

Instance properties

This interface doesn't inherit any property.

TreeWalker.rootRead only: Returns the rootNode as specified when theTreeWalker was created.
TreeWalker.whatToShowRead only: Returns anunsigned long which is a bitmask made of constants describing the types ofNode that must be presented. Non-matching nodes are skipped, but their children may be included, if relevant.
TreeWalker.filterRead only: Returns theNodeFilter associated with thisTreeWalker used to select the relevant nodes.
TreeWalker.currentNode: Is theNode on which theTreeWalker is currently pointing at.

Instance methods

This interface doesn't inherit any method.

Note:In the context of aTreeWalker, a node isvisible if it exists in the logical view determined by thewhatToShow andfilter parameter arguments. (Whether or not the node is visible on the screen is irrelevant.)

TreeWalker.parentNode()

Moves the currentNode to the firstvisible ancestor node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, or if it is before that theroot node defined at the object construction, returnsnull and the current node is not changed.

TreeWalker.firstChild()

Moves the currentNode to the firstvisible child of the current node, and returns the found child. It also moves the current node to this child. If no such child exists, returnsnull and the current node is not changed. Note that the node returned byfirstChild() is dependent on the value ofwhatToShow set during instantiation of theTreeWalker object. Assuming the following HTML tree, and if you set thewhatToShow toNodeFilter.SHOW_ALL a call tofirstChild() will return aText node and not anHTMLDivElement object.

html

<!doctype html><html lang="en">  <head>    <title>Demo</title>  </head>  <body>    <div></div>  </body></html>

let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL);let node = walker.firstChild(); // nodeName: "#text"

But if we do:

let walker = document.createTreeWalker(  document.body,  NodeFilter.SHOW_ELEMENT,);let node = walker.firstChild(); // nodeName: "DIV"

The same applies tonextSibling(),previousSibling(),firstChild() andlastChild()

TreeWalker.lastChild()

Moves the currentNode to the lastvisible child of the current node, and returns the found child. It also moves the current node to this child. If no such child exists,null is returned and the current node is not changed.

TreeWalker.previousSibling()

Moves the currentNode to its previous sibling, if any, and returns the found sibling. If there is no such node, returnnull and the current node is not changed.

TreeWalker.nextSibling()

Moves the currentNode to its next sibling, if any, and returns the found sibling. If there is no such node,null is returned and the current node is not changed.

TreeWalker.previousNode()

Moves the currentNode to the previousvisible node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, or if it is before that theroot node defined at the object construction, returnsnull and the current node is not changed.

TreeWalker.nextNode()

Moves the currentNode to the nextvisible node in the document order, and returns the found node. It also moves the current node to this one. If no such node exists, returnsnull and the current node is not changed.