HTML DOM createNodeIterator() Method

The createNodeIterator() Method is used to create a node iterator and hence using that node iterator we can iterate over nodes.

Syntax:

const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);

Parameters:

  • root: The root node from which to begin the Node Iterator’s traversal.
  • whatToShow(Optional): This is an optional argument representing a bitmask created by combining the constant properties of NodeFilter. The following are the possible values of unsigned constant.
Constant Return Value Constant Description
NodeFilter.SHOW_ALL

1



Shows all nodes.
NodeFilter.SHOW_COMMENT

128

Shows Comment nodes.
NodeFilter.SHOW_DOCUMENT

256

Shows Document nodes.
NodeFilter.SHOW_DOCUMENT_FRAGMENT

1024

Shows DocumentFragment nodes.
NodeFilter.SHOW_DOCUMENT_TYPE

512

Shows DocumentType nodes.
NodeFilter.SHOW_ELEMENT

1

Shows Element nodes.
NodeFilter.SHOW_PROCESSING_INSTRUCTION

64

Shows ProcessingInstruction nodes.
NodeFilter.SHOW_TEXT

4

Shows Text nodes.
  • filter(Optional): An object implementing the NodeFilter interface. Exp, NodeFilter.FILTER_ACCEPT.

Return Value: This method returns a node iterator.



Example: In this example, we will create a node iterator using this method and will iterate using the nextNode() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html>  
<head>
    <meta charset="UTF-8">
    <title>HTML | DOM createNodeIterator() Method
    </title>
</head>   
  
<body style="text-align:center;">
    <h1 style="color:green;">  
     GeeksforGeeks
    </h1
    <p
HTML | DOM createNodeIterator() Method
    </p>
  
    <button onclick = "Geeks()">
    Click Here
    </button>
    <p id="a"></p>
    <script
        var a = document.getElementById("a");
        function Geeks(){
           const nodeIterator = document.createNodeIterator(
                document.body,
                NodeFilter.SHOW_ELEMENT
                )
           console.log(nodeIterator)
             
            let nextNode=nodeIterator.nextNode();
            nextNode=nodeIterator.nextNode();
            a.innerHTML =
'Next Node content is : '+nextNode.textContent;
            console.log(nextNode);
}
</script>
</body>
</html>

chevron_right


Output:

Before Clicking Button:

After Clicking Button:

In the console: in Console, the node iterator and the next node can be seen.

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.