[DOM4] Short and Efficent DOM Traversal

TL/DR: CSS Selectors represent the most commonly used way to perform search in the DOM. But, until now, you’ve to choose between using CSS (querySelectorAll) or doing incremental search (createTreeWalker). I think we should try to fix that.

 


The proposal here would be to accept CSS selectors in replacement to the existing whatToShow flags {which are difficult to use and not entirely satisfying}, i.e. overloading the createTreeWalker/createNodeIterator functions to take a CSS Selector in the form of a string as a second parameter. 

 


var tw = document.createTreeWalker(document.body, “ul.menu > li”);

while(tw.nextNode()) {

   if(...) break;

   ...

}

 

Advantages:

 
It’s much faster than to use a javascript function as a filter that would call again the browser stack to find out whether a CSS selector match or not a specific element
 
We do not loose the ability to provide a more complex piece of javascript if we really need it, but we reduced the cases where we need one.
 
It’s less code to write (CSS is more efficient than any piece of JS)
 
It allows getting rid of the long named constants nobody likes to use

 

In addition, it would open huge optimization opportunities for the browser (like skipping siblings that look similar, not entering into descendants if it’s known a certain css class is not present among them, reusing cached lists of elements matching a selector, or whatever).

 

Thougths?