querySelector/querySeletorAll兼容方法

querySelector/querySeletorAll是原生js的两个选择器方法,是很好用的,BUT不兼容IE6\7,所以找了个兼容方法:

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

// 用于在IE6和IE7浏览器中,支持Element.querySelectorAll方法
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;
})();

感谢: Jack Tang

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 122,388评论 15 533
  • 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能...
    卡卡西哥哥阅读 103评论 0 1
  • 海,我向往已久,好象那才是我真正的故乡。第一次看见海,是在天津。那个十月的下午,阳光灿烂而温暖,天空纯净得像被洗过...
    Joyobuy阅读 8评论 0 0
  • 腾讯模仿淘宝败了,又开始模仿支付宝,虽然用微信发红包的挺多,但是数量大的钱还是愿意放在支付宝,微信缺少了什么? 支...
    科技时尚季阅读 725评论 0 0
  • 枫舞赤洪流, 江山不倚愁。 光阴去史志, 藏得一年秋。
    林癫阅读 64评论 0 8