javascript - How to add querySelectorAll() function to Element for IE <= 7? - Stack Overflow

admin管理员组

文章数量:1289425

With the code from this article I've successfully added querySelectorAll to document in IE7.

But I need to use it on an element rather than document, like this:

var containers = document.querySelectorAll('.container');   // Works
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    container.querySelectorAll('a[data-type="people"]');    // Fails
    // ...
}

Is there a way to add querySelectorAll to elements in IE7 rather than only to document?

With the code from this article I've successfully added querySelectorAll to document in IE7.

But I need to use it on an element rather than document, like this:

var containers = document.querySelectorAll('.container');   // Works
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    container.querySelectorAll('a[data-type="people"]');    // Fails
    // ...
}

Is there a way to add querySelectorAll to elements in IE7 rather than only to document?

• javascript
• internet-explorer-7
• selectors-api

Share Improve this question Follow edited May 10, 2013 at 8:55 T.J. Crowder 1.1m199199 gold badges2k2k silver badges1.9k1.9k bronze badges asked May 10, 2013 at 8:47 X.Q. KuangX.Q. Kuang 8311 silver badge66 bronze badges 2

• Why not try the Sizzle library. It's the same selector engine jQuery uses. – Joseph Commented May 10, 2013 at 8:57
• I need to keep the code tiny, no need the unnecessary functions. ;-) – X.Q. Kuang Commented May 10, 2013 at 9:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Very interesting question.

I would lean toward using a library for this, like jQuery, one of the ones mentioned below, Closure, or any of several others. Or just using Sizzle (the selector engine jQuery uses in the v1.9 branch).

But answering the question you actually asked:

You can't extend element prototypes on IE7 (sadly), so unless you want to run all of your element instances through a preprocessor function to add querySelectorAll to them (the way Prototype and MooTools work, for instance), you'll have to have a separate function you pass the element into.

Here's one approach to writing that function:

var qsaWorker = (function() {
    var idAllocator = 10000;

    function qsaWorker(element, selector) {
        var needsID = element.id === "";
        if (needsID) {
            ++idAllocator;
            element.id = "__qsa" + idAllocator;
        }
        try {
            return document.querySelectorAll("#" + element.id + " " + selector);
        }
        finally {
            if (needsID) {
                element.id = "";
            }
        }
    }

    return qsaWorker;
})();

And of course, if you want to use qsaWorker in browsers that have querySelectorAll, you'd want this:

function qsaWorker(element, selector) {
    return element.querySelectorAll(selector);
}

So in total, then, you'd probably want:

var qsaWorker = (function() {
    var idAllocator = 10000;

    function qsaWorkerShim(element, selector) {
        var needsID = element.id === "";
        if (needsID) {
            ++idAllocator;
            element.id = "__qsa" + idAllocator;
        }
        try {
            return document.querySelectorAll("#" + element.id + " " + selector);
        }
        finally {
            if (needsID) {
                element.id = "";
            }
        }
    }

    function qsaWorkerWrap(element, selector) {
        return element.querySelectorAll(selector);
    }

    // Return the one this browser wants to use
    return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
})();

Your code using it would then look like this:

var containers = document.querySelectorAll('.container');
for (var i=0; i<=containers.length; i++) {
    var container = containers[i];
    var links = qsaWorker(container, 'a[data-type="people"]'); // <== Changed
    // ...
}

But again, I would tend to lean toward using a library...

本文标签： javascriptHow to add querySelectorAll() function to Element for IE lt 7Stack Overflow