A thing that I noticed about most JavaScript frameworks is that the most common way to find/access the DOM elements is to use CSS selectors.
However this usually requires the framework to include a CSS selector parser, because they need to support selectors, that the browser natively doesn’t, foremost the frameworks own proprietary extensions.
I would think that these parsers are large and slow. Wouldn’t it be more efficient to have something that doesn’t require a parser, such a chained method calls?
Some like:
id("example").children().class("test").hasAttribute("href")
instead of
$("#example > .test[href]")
Are there any frameworks around that do something like this? And how do they compare with jQuery and friends in regard to performance and size?
EDIT: You can consider this a theoretical discussion topic. I don’t plan to use anything other than jQuery in any practical projects in near furure. I was just wondering why there aren’t any other, possibly better approaches.
DOM traversal and manipulation are some of the most helpful functions in current popular JavaScript frameworks because of the way they efficiently handle cross-browser issues. If you are working with the DOM, you will eventually need that functionality, and anything you write yourself is bound to be less efficient than the best methods.
In terms of speed, I would imagine the slight performance hit from parsing the selectors would be offset by the optimization inherent in the engine. If you rely on the programmer to specify the path (i.e. your example), you may be missing out on optimization opportunities that you didn’t know existed. In your example for instance, let’s say that it’s ultimately faster right-to-left (find all class=”test” with hrefs first, then check parents). You would be relying on the programmer to memorize these optimization quirks.