Jump to content

how does a JS library implement selectors?


skaterdav85
 Share

Recommended Posts

I was wondering, how does a JS library like jQuery implement selectors, from a general point of view? The only thing I can think of is that it parses the selector such as 'div#nav ul li' and then behind the scenes it uses getElementById(), getElementsByTagName(), childNodes, and parentNode to filter through an initial, larger collection and return a smaller, filtered collection based on the selector you typed. Or is there some other magic going on that I don't know about?

Link to comment
Share on other sites

Actually, some (most) browsers support it natively. For IE6 and IE7 it would have to parse the selector and figure out which elements it needs to look through to find the matches.
If some browsers support it natively, how would you use that to say, fetch all <li> elements within a <ul> with an id of "nav"?
I'm not sure how the parsing works, but it is probably quite complex. Actually, jQuery implements another library called SizzleJS. You could delve into the source code here.
I did not know this. Sizzle looks like a great way to implement selectors if you wanted to build your own library.The reason I ask this is because I was developing an app at work using raw JS as I wanted to improve my raw JS skills and be less dependent on a library, but as I was doing this, I found it hard to target a specific set of elements since I was only aware of the standard techniques. Looks like I could have used Sizzle for this. =) Has anyone used Sizzle alone in a project?
Link to comment
Share on other sites

CSS selectors in JS?
Yes. Using document.querySelectorAll(). It's supported in all latest browser versions, and IE8+.
If some browsers support it natively, how would you use that to say, fetch all <li> elements within a <ul> with an id of "nav"?
Same way you do it in CSS:
var items = document.querySelectorAll('ul#nav li');

Link to comment
Share on other sites

Yes. Using document.querySelectorAll(). It's supported in all latest browser versions, and IE8+.
Very interesting! This is just one more reason to add onto my list, "Why I want IE 6-7 to die".Speaking of IE, I got a visitor on my website using IE 2. :) Edited by Fmdpa
Link to comment
Share on other sites

wow, awesome! Thanks boen! So does that mean libraries like Sizzle must perform some complex parsing using the basic methods i mentioned above to fetch elements based on a selector in IE 6/7, which would take much longer than in modern browsers?

Link to comment
Share on other sites

wow, awesome! Thanks boen! So does that mean libraries like Sizzle must perform some complex parsing using the basic methods i mentioned above to fetch elements based on a selector in IE 6/7, which would take much longer than in modern browsers?
Yep. And that's exactly what the majority of the code in Sizzle does.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...