Play DOM traversal--implement Getelementbyid,getelementsbytagname method with Nodeiterator

First declare DOM2 in Nodeiterator and treewalker these two types really just used to play, because performance does not traverse super slow, in JS basically do not use them, in addition to "elevation" there are two or three pages to explain it, Google's learning materials are very little (there are quite a lot of foreign articles) ... Because of the spirit of not letting go of any knowledge of the attitude, combined with their own understanding of the two things to learn, you have to understand the two thing good ~

The DOM2-level traversal and scope modules define two types for completing the sequential traversal of the DOM structure: Nodeiterator and Treewalker. These two types perform depth-first sequential traversal of the DOM structure based on a given starting point, and compatibility >ie8 and high-version other browsers are accessible.

Nodeiterator:

Use Document.createnodeiterator (root, Whatshow, filter, entityreferenceexpansion) to create a Noediterator type instance iterator, So the prototype chain relationship is:
Iterator.__proto__->nodeiterator.prototype->object.prototye

TreeWalker:

Use Document.createtreewalker (root, Whatshow, filter, entityreferenceexpansion) to create a Treewalker type instance Walker, so the prototype chain relationship is:
Walker.__proto__->treewalker.prototype->object.prototype


Compare down, in fact, two methods commonly used, NextNode () and Previousnode (). Treewalker.prototype is a little more than nodeiterator.prototype, and there are a few ways to traverse in different directions.
(1). In each iterator, there is an internal pointer to the root node, and the NextNode method is to return the node that contains the pointer inside the walker, and then move the pointer to the next node. The Previousnode () method is to first move the pointer up one node and then return to that node. So NextNode () ==previousnode ()

(2). In each walker there is also an internal pointer, but to the first child node of the root node, the NextNode method is to return the node where the iterator resides and not move the pointer (that is, the pointer and the node are in the same place), and the previous () method is to move the pointer up one node first. Then return to that node, so here NextNode ()! = Previous ()

So Treewalker.prototype has a CurrentNode property that represents the node that was returned in the last traversal:

(3). To tell the difference, say that the two parameters are the same:
Root: Nodes in a tree that you want to start as a search
Whattoshow: The numeric code that represents which nodes to access, from Nodefilter.prototype or nodefilter these uppercase constants from the body ...

Filter: is a Nodefilter type instance object, or a function that indicates whether a particular node should be accepted or rejected. The function is to go through this filter when calling NextNode or Previousnode to delete the desired node, and if any one of the nodes in the document goes one step, depending on the type of filter node, each node returned may actually take several steps.
Entityreferenceexpansion: Indicates whether to extend the entity reference, False is good.

By the way, the difference between Nodeiterator and Treewalker is that when you use Nodeiterator objects, the Nodefilter.filter_skip and Nodefilter.filter_reject function the same as skipping the specified nodes. When using the Treewalker object, Nodefilter.filter_skip skips the corresponding node and advances to the next node in the subtree, nodefilter.filter_reject the corresponding node and the entire subtree of that node.


Ok! Said finished above, do not know whether you understand ~ don't understand it's okay anyway these two types are not commonly used, efficiency is poor ~
These two types of traversal through the DOM are very easy to think of our common document.getelementbyid,document.getelementsbytagname,document.getelementsbynames ... The series method does not also search the DOM for the specified node ... Here, use Nodeiterator to make it work.

Document.prototype.getElementById =function(ID) {varFilter =function(node) {returnNode.id = = ID?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; }  variterator = Document.createnodeiterator (document, Nodefilter.show_element, filter,false); varnode =Iterator.nextnode (); returnnode;} Document.prototype.getElementsByTagName=function(tagname) {varFilter =function(node) {returnNode.tagName.toLowerCase () = = TagName?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; } varHtmlcollection = []; variterator = Document.createnodeiterator (document, Nodefilter.show_element, filter,false); varnode =Iterator.nextnode ();  while(node!=NULL) {Htmlcollection.push (node); Node=Iterator.nextnode ();} htmlcollection.__proto__=Htmlcollection.prototype;returnhtmlcollection;}

Success! Other methods are similar, interested can be realized by themselves ~

Someone in StackOverflow raised the When to use Nodeiterator? Queryselector and filter filter to compare, who is fast who is slow to see the name is obvious, interested can see AH ~ i test under the rough

Also do not know others JS engine getElementById really how to realize, another time to see ~


Reference

JavaScript Advanced Programming

JavaScript standard Reference Tutorial-document node

Play DOM traversal--implement Getelementbyid,getelementsbytagname method with Nodeiterator