javascript - How to make document.querySelector work in IE6 - Stack Overflow

admin管理员组

文章数量:1279113

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

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

• javascript
• internet-explorer-6

Share Improve this question Follow edited Jan 28, 2015 at 15:01 Lucien Dubois asked Jan 28, 2015 at 14:31 Lucien DuboisLucien Dubois 1,70455 gold badges3333 silver badges5757 bronze badges 7

• 1 Why would you want to torture yourself like that? – Niet the Dark Absol Commented Jan 28, 2015 at 14:32
• 4 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 Commented Jan 28, 2015 at 14:32
• Getting colours on a BW display... – Shomz Commented Jan 28, 2015 at 14:33
• 2 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 Commented Jan 28, 2015 at 14:33
• 2 IF a client has a large share of users on ie6 (god forbid) then its more then acceptable that they should require ie6 patability – atmd Commented Jan 28, 2015 at 14:35

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 9

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.

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

本文标签： javascriptHow to make documentquerySelector work in IE6Stack Overflow