how does a JS library implement selectors?

[skaterdav85]

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?

[justsomeguy]

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.

[Fmdpa]

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.

[Fmdpa]

Actually, some (most) browsers support it natively.

CSS selectors in JS?

[skaterdav85]

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?

[boen_robot]

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');

[ShadowMage]

EDIT: n/m, looks like boen's already got it under control....:)Thanks boen!

[Fmdpa]

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.

[skaterdav85]

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?

[boen_robot]

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.