JavaScript document.createTreeWalker() Method

You are Here:

JavaScript document.createTreeWalker() Method

The document.createTreeWalker() method returns a newly created TreeWalker object.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <div id="point"> <p>Click <span>any</span></p> <b>Button</b> </div> <button onclick="myParent()">Parent Node</button> <button onclick="myAllChild()">All Child Node</button> <button onclick="myFirstChild()">First Child</button> <script> var x = document.getElementById("point") var walker = document.createTreeWalker(x, NodeFilter.SHOW_ELEMENT, null, false) function myParent(){ walker.currentNode = x; alert(walker.currentNode.tagName); } function myAllChild(){ walker.currentNode = x; while(walker.nextNode()) alert(walker.currentNode.tagName) } function myFirstChild(){ walker.currentNode = x; alert(walker.firstChild().tagName); } </script> </body> </html>

Syntax

document.createTreeWalker(root, whatToShow, filter)

Parameter Values

ValueTypeExplanation
rootRequiredSpecifies the root node at which to begin the NodeIterator's traversal.
whatToShowOptionalSpecifies a convenient way of filtering for certain types of node.
The following are the constant properties of NodeFilter.

NodeFilter.SHOW_ALL

Shows all nodes.

NodeFilter.SHOW_COMMENT

Shows Comment nodes.

NodeFilter.SHOW_DOCUMENT

Shows Document nodes.

NodeFilter.SHOW_DOCUMENT_FRAGMENT

Shows DocumentFragment nodes.

NodeFilter.SHOW_DOCUMENT_TYPE

Shows DocumentType nodes.

NodeFilter.SHOW_ELEMENT

Shows Element nodes.

NodeFilter.SHOW_PROCESSING_INSTRUCTION

Shows ProcessingInstruction nodes.

NodeFilter.SHOW_TEXT

Shows Text nodes.

NodeFilter.SHOW_ATTRIBUTE

Shows attribute Attr nodes.

NodeFilter.SHOW_CDATA_SECTION

Shows CDATASection nodes.

NodeFilter.SHOW_ENTITY

Shows Entity nodes.

NodeFilter.SHOW_ENTITY_REFERENCE

Shows EntityReference nodes.

NodeFilter.SHOW_NOTATION

Shows Notation nodes.

filterOptionalSpecifies an object implementing the NodeFilter interface.

Reminder

Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in JavaScript.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author