How to make document.querySelector work in IE6

Question

I work on a website and I got a javascript function that doesn't work in Internet Explorer 6. I know

document.querySelector(selector)

only work in Internet Explorer 8+

What could I do to make it work in IE6?

(I don't try to make it work for the fun of it ;) )

please don't. Let it go down in the burning hell..where it shall meet its fate. I've heard Satan is waiting for IE6 — Amit Joki, Jan 28 '15 at 14:32
You'd have to pollyfill it IF its required by a client (which I assume it is, you wouldn't do it for fun) maybe even use something like jquery if legacy support is required. (Or maybe just use sizzle if its only the selecting you want) — atmd, Jan 28 '15 at 14:33
IF a client has a large share of users on ie6 (god forbid) then its more then acceptable that they should require ie6 compatability — atmd, Jan 28 '15 at 14:35
You could loop through document.all and filter by id and class or use document.getElementsByTagName or document.getElementsByClassName make sure you feature test for querySelectorAll first if(document.querySelectorAll) — Rob Parsons, Jan 29 '15 at 03:34

score 9 · Answer 1 · edited May 23 '17 at 12:17

I strongly encourage you not to try to support IE6 any longer.

But you can add document.querySelector and document.querySelectorAll using this very clever trick from an Ajaxian article. The article actually gets it a bit wrong, it adds something called querySelector that does querySelectorAll instead. I've fixed the name here:

/*@cc_on
if (!document.querySelectorAll)
    document.querySelectorAll = function(selector)
    {
        var head = document.documentElement.firstChild;
        var styleTag = document.createElement("STYLE");
        head.appendChild(styleTag);
        document.__qsResult = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}";
        window.scrollBy(0, 0);
        head.removeChild(styleTag);

        var result = [];
        for (var i in document.__qsResult)
            result.push(document.__qsResult[i]);
        return result;
    }
@*/

Although I would never countenance using for-in like that; details and alternatives in this other answer.

And by inference, querySelector:

/*@cc_on
if (!document.querySelector)
    document.querySelector = function(selector)
    {
        var head = document.documentElement.firstChild;
        var styleTag = document.createElement("STYLE");
        head.appendChild(styleTag);
        document.__qsResult = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}";
        window.scrollBy(0, 0);
        head.removeChild(styleTag);

        // Return first result only               
        return document.__qsResult[0] || null;
    }
@*/

Note that neither of the above adds Element#querySelector or Element#querySelectorAll (the versions that look only within an element), just document.querySelector and document.querySelectorAll. And you can't add the Element versions on IE6 without adding them to each individual element, since IE6 doesn't support element prototypes.

@AmitJoki: :-) Not *me*, I just remembered having read about a trick some years back, found it fairly quickly with a search. — T.J. Crowder, Jan 28 '15 at 14:41
Actually, it is good to still support IE 6 in certain areas of business such as computer maintenance companies so that people with IE6 can use the website to know who to pay to upgrade their browser (and probably their OS) because for some people, its just a miracle they're able to work the mouse. — , Apr 23 '17 at 03:17
HI T.J, I am trying to use your code above in my project. I am having some troubles though. Could you please have a look at my question and see what you think? https://stackoverflow.com/questions/53539726/ie7-queryselector-not-finding-elements — , Nov 29 '18 at 16:19

meskobalazs · Answer 2 · 2015-01-28T14:40:15.657

You could use a polyfill, like this one, however still using IE6, is the IT analogue of necromancy.

The mentioned polyfill is based on polyfill.js, which can be found here, this provides polyfills for a lot of ECMA 5 functions.

I will post the current state of the script, maybe it will useful in the future (though I really hope, it won't be :) ):

if (!document.querySelectorAll) {
    document.querySelectorAll = function (selectors) {
        var style = document.createElement('style'), elements = [], element;
        document.documentElement.firstChild.appendChild(style);
        document._qsa = [];

        style.styleSheet.cssText = selectors +
                '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
        window.scrollBy(0, 0);
        style.parentNode.removeChild(style);

        while (document._qsa.length) {
            element = document._qsa.shift();
            element.style.removeAttribute('x-qsa');
            elements.push(element);
        }
        document._qsa = null;
        return elements;
    };
}

if (!document.querySelector) {
    document.querySelector = function (selectors) {
        var elements = document.querySelectorAll(selectors);
        return (elements.length) ? elements[0] : null;
    };
}

The updated polyfill you mentioned now can be found [here](https://github.com/inexorabletash/polyfill/blob/master/polyfill.js#L4599) — bantya, Apr 19 '17 at 17:18

How to make document.querySelector work in IE6

2 Answers2

Linked