Talking about the DOM number traversal

Recently, we have been studying the definition of DOM traversal and scope;

In fact, the DOM module in JS defines two types used to assist in the sequential traversal of the DOM structure: Nodeiterator and Treewalker. These two types can perform depth-first traversal operations on the DOM structure based on a given starting point;

However, this is derived from the "DOM2 level traversal and scope" content; but you know that IE does not support DOM traversal. Therefore, the following code can be used to detect the browser's support for DOM2-level traversal capability;

var straversals = document.implementation.hasFeature ("Traversal", "2.0");

var snodeiterator = (typeof Document.createnodeiterator = = "function");

var streewalker = (typeof Document.createtreewalker = = "function");

In fact, now a lot of front-end personnel for some front-end framework such as jquery, but once touched to the original JS, but do not know, the reason is very simple, is that they are still not in-depth understanding of JS operating mechanism, we simply like the machine with jquery, Because jquery has helped you solve some of the browser compatibility issues;

As well as some potential bugs, and the OST JS for these problems still need you to study one step at a distance, the topic is far away, continue ...

Any node can be used as the root node of the traversal, mainly to see who you choose as the root node;

One: Nodeiterator is one of these two relatively simple, you can use the Document.createnodeiterator () method to create its instance; parameter reference:

1,root: A node in a tree that wants to be the starting point of a search;

2,whattoshow: Represents the numeric code to access those nodes;

3,filter: Is a Nodefilter object, or a function that indicates whether a particular node should be accepted or rejected;

4,entityreferenceexpansion: Boolean value that indicates whether the entity reference is extended. This parameter is not used in HTML pages because the entity references cannot be extended;

The two main methods of this type are NextNode () and Previousnode (); the NextNode () method is used to forward further, while the Previousnode () is used to back one step backwards;

Such as:

<div id= "My1" >

<p><b>Hello</b>Andy!</p>

<ul>

<li>Num1</li>

<li>Num2</li>

<li>Num3</li>

</ul>

</div>

To traverse all the elements in a DIV element:

var div =document.getelementbyid ("my1");

var itertaor = Document.createnodeiterator (Div,nodefilter.show_element,null,fasle);

var node = Itertaor.nextnode ();

while (node!== null) {

alert (node.tagname);

node = Itertaor.nextnode ();

}

PS: Can I try to print out what results?

Two: TreeWalker is a higher version of the Nodeiterator. In addition to the same functions as NextNode () and Previousnode (), this type also provides a way to traverse the DOM structure in different directions;

1,parentnode (); Traverse to the parent node of the current node;

2,firstchild (); Traverse to the first child node of the current node;

3,lastchild (); Iterates to the last child node of the current node;

4,nextsibling (); Traverse to the next sibling node of the current node;

5,previoussibling (); Traverse to the previous sibling node of the current node;

The Tresswalker object is created using the Document.createtreewalker () method, which receives 4 parameters identical to the Document.createnodeiterator () method;

Talking about the DOM number traversal