IE6、IE7兼容querySelectorAll和querySelector方法-最终版本

摘要:
querySelector和querySelectorAll方法在W3C Selectors API规范中定义。它们的功能是根据CSS选择器规范轻松定位文档中的指定元素。目前,几乎主流浏览器都支持它们。包括IE8或以上版本、Firefox、Chrome、Safari、Opera。querySelector和querySelectorAll方法易于使用。不幸的是,IE6和IE7不支持它们。IE6和IE7如何支持querySelectorAll和querySelector,请参见以下代码:if(!elements[0]:null;};}//它在IE6和IE 7浏览器中用于支持元素。querySelectorAllmethodvarqsaWorker=(function){vardAllocater=10000;functionqsaWorker(element,selector){varneedsID=“”;if(needsID){++idAllocator;element.id=“__qsa”+idAllocaor;}尝试{returndocument.querySelectorAll(“#”+element.id+“”+selector);}最后{if(needsID){element.id=“”;}}}}函数qsaWorkerWrap(元素,选择器){returnelement.querySelectorAll(选择器);}//将当前浏览器返回到返回文档.createElement('div').querySelectorAll?

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

 querySelector 和 querySelectorAll 方法很好用,可惜IE6、IE7不支持,怎么让IE6、IE7也支持querySelectorAll和querySelector这两个方法呢,请看下面的代码:

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

 参考资料:

  qsa-polyfill-ie7.js
  How to add querySelectorAll() function to Element for IE <= 7?
  querySelector.polyfill.js

免责声明:文章转载自《IE6、IE7兼容querySelectorAll和querySelector方法-最终版本》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇jmeter将响应结果中的Excel导出到本地spring启动过程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

  1.操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的) 2. 改变元素内容(获取或设置) innerText改变元素内容 <body>    <button>显示当前系统时间</button...

前端小白之每天学习记录----js简单的组件封装

设计模式:是解决问题的模板 关于设计模式,可以阅读汤姆大叔的博文http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 这里简单介绍两种设计模式: 1.单例模式:单例就是保证一个类只有一个实例       eg:在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象...

javascript实现图片延迟加载方法汇总(三种方法)

看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一起学习javascript实现图片延迟加载吧 看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开...

centos7中/tmp文件保存天数

不要在/tmp目录下保存文件,该目录会定期清理文件 /tmp默认保存10天 /var/tmp默认保存30天 配置文件:/usr/lib/tmpfiles.d/tmp.conf 默认配置文件:# This file is part of systemd.## systemd is free software; you can redistribute it...

Element表格eltable多列排序,后端接口排序

ElementUI 2.x版本的 table 组件目前是不支持多列排序的,此方法适用于框架下的table组件多列数据排序,将排序方式以数组形式传递给后端排序。效果如下:   image.png 1.Table组件多列排序 // el-table标签中增加handleSortChange和handleHeaderCellClass方法 //...

The instance of entity type 'xxx' cannot be tracked because another instance with the same key value for {'Id'} is already being tracked.

具体详细错误信息:The instance of entity type 'xxx' cannot be tracked because another instance with the same key value for {'Id'} is already being tracked. When attaching existing entities...