Create a gist now

Instantly share code, notes, and snippets.

IE7 querySelectorAll polyfill
if (!document.querySelectorAll) {
document.querySelectorAll = function(selector) {
var doc = document,
head = doc.documentElement.firstChild,
styleTag = doc.createElement('STYLE');
head.appendChild(styleTag);
doc.__qsaels = [];
styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
window.scrollBy(0, 0);
return doc.__qsaels;
}
}
document.querySelectorAll||(document.querySelectorAll=function(a){var b=document,c=b.documentElement.firstChild,d=b.createElement("STYLE");return c.appendChild(d),b.__qsaels=[],d.styleSheet.cssText=a+"{x:expression(document.__qsaels.push(this))}",window.scrollBy(0,0),b.__qsaels});
@connrs
Owner

It is untested in IE6 so I haven't mentioned it here. With IE6, you would be limited by which CSS selectors you could take advantage of. I'm working on projects that have a (for progressively enhanced JS) baseline of IE7. Polyfilling querySelectorAll allows me to do some nice element event handlers in projects where jQuery and other selector libraries aren't permitted.

@corysimmons

What selectors does this cover?

@ptdixon

Nice trick. But it only seems to work in Quirks mode.
If I set a <!DOCTYPE HTML> then it breaks ?

@AliMD

What ?! How it work exactly !

@AliMD

Error ! TypeError: Cannot set property 'cssText' of undefined

@jslegers

I need support for selectors like a:not(:last-child). This polyfill doesn't help me in that area.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment