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

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.


What selectors does this cover?


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


What ?! How it work exactly !


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


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