IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

元素选择器 - Mini Query

小胡子哥的个人网站 2016-05-05 22:44:05 累计浏览 2,072 次
本机暂存

寥寥几行代码,实现一个简单的元素选择器,兼容低版本 IE。

自 IE8 开始已经开始支持 querySelector 和 querySelectorAll 这两个十分有用的选择器函数,如果不考虑低版本浏览器,它们已经可以基本满足日常需求了。而在兼容低版本浏览器中,可以采用一些 hack 手段。

原理比较简单:通过 CSS Rule 给我们的目标元素添加特殊属性,然后遍历所有元素找到具备特殊属性的元素,当然,找到之后,移除这些特殊属性。

var firstStyleSheet = document.styleSheets[0] || document.createStyleSheet();
  firstStyleSheet.addRule(query, 'Barret:Lee');
for (var i = 0, len = document.all.length; i < len; i++) {
var item = document.all[i];
  item.currentStyle.Barret && res.push(item);
}
firstStyleSheet.removeRule(0);

比如我们要获取 .box .item a.pink 元素,上面的代码是这么做的,

  • 给所有的 .box .item a.pink 元素添加 { Barret: Lee; } 这个 CSS 的样式

  • 遍历所有元素找到包含 Barret 这个 CSS 属性的元素

  • 移除属性

IE8 有些调皮,需要修复点小问题,源码地址:

代码预览:

function$(query) {
var res = [];
if (document.querySelectorAll) {
    res = document.querySelectorAll(query);
  } else {
var firstStyleSheet = document.styleSheets[0] || document.createStyleSheet();
    query = query.split(',');
for(var i = 0, len = query.length; i < len; i++) {
      firstStyleSheet.addRule(query[i], 'Barret:Lee');
    }
for (var i = 0, len = document.all.length; i < len; i++) {
var item = document.all[i];
      item.currentStyle.Barret && res.push(item);
    }
    firstStyleSheet.removeRule(0);
  }
if(res.item) { /* Fuck IE8 */
var ret = [];
for(var i = 0, len = res.length; i < len; i++){
      ret.push(res.item(i));
    }
    res = ret;
  }
return res;
};

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,351)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,411)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,937)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,764)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,352)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,225)
  8. 什么是全栈工程师? (累计阅读 14,041)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,736)
  10. 7 天打造前端性能监控系统 (累计阅读 11,191)