6

この記事のコードを使用しquerySelectorAllてdocument、IE7に正常に追加できました。

しかし、次のように、ではなく要素で使用する必要があります。document

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
    // ...
}

querySelectorAllだけではなく、IE7 の要素に追加する方法はありdocumentますか?

4

1 に答える 1

9

非常に興味深い質問です。

これには、 jQuery、以下で説明するものの1つ、Closure、または他のいくつかのいずれかのようなライブラリを使用することに傾倒します。または、Sizzle (jQuery が v1.9 ブランチで使用するセレクター エンジン) を使用するだけです。

しかし、あなたが実際に尋ねた質問に答える：

IE7 では (残念ながら) 要素のプロトタイプを拡張することはできません。そのため、すべての要素インスタンスをプリプロセッサ関数を介して実行しquerySelectorAllてそれらに追加したい場合 (たとえば、 PrototypeとMooToolsの動作方法) を除き、次のようにする必要があります。要素を渡す別の関数。

その関数を作成する 1 つの方法を次に示します。

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

そしてもちろん、qsaWorkerを備えたブラウザで使用したい場合は、次のようにする必要がquerySelectorAllあります。

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

したがって、合計すると、おそらく次のようになります。

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

それを使用したコードは次のようになります。

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
    // ...
}

しかし、繰り返しになりますが、私はライブラリを使用する傾向があります...

于 2013-05-10T08:52:10.323 に答える