码迷,mamicode.com
首页 > 其他好文 > 详细

让IE6、IE7支持querySelectorAll和querySelector方法

时间:2015-01-27 17:45:23      阅读:866      评论:0      收藏:0      [点我收藏+]

标签:

 querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

 关于querySelector 和 querySelectorAll 方法的使用,请参考各浏览器中querySelector和querySelectorAll的实现差异javascript高级选择器querySelector和querySelectorAll两篇文章。

 怎么让IE6、IE7也支持querySelectorAll和querySelector方法呢,请看下面的代码:

if (!document.querySelectorAll) {
    document.querySelectorAll = function (selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement(‘STYLE‘);
        head.appendChild(styleTag);
        doc.__qsaels = [];

        if (styleTag.styleSheet) {   // for IE
            styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
        } else {                // others
            var textnode = document.createTextNode(selector + "{x:expression(document.__qsaels.push(this))}");
            styleTag.appendChild(textnode);
        }
        window.scrollBy(0, 0);

        return doc.__qsaels;
    }
}

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

if (typeof HTMLElement != "undefined") {
    HTMLElement.prototype.querySelector = document.querySelector;
    HTMLElement.prototype.querySelectorAll = document.querySelectorAll;
}
else {
    var a = document.getElementsByTagName("*"), l = a.length, i;
    for (i = 0; i < l; i++) {
        a[i].querySelector = document.querySelector;
        a[i].querySelectorAll = document.querySelectorAll;
    }
}

 

  文件下载:  点击此处下载

 

  文件使用:

  <!--[if lte IE 8]>
  <script type="text/javascript" src="/js/IE6Fix.js"></script>
  <![endif]-->

  

 参考资料:

  qsa-polyfill-ie7.js
  querySelectorAll shim for non-IE browsers
  querySelector.polyfill.js

让IE6、IE7支持querySelectorAll和querySelector方法

标签:

原文地址:http://www.cnblogs.com/jacktang/p/4253249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!