IT技术博客大学习 共学习 共进步

元素选择器 - Mini Query

小胡子哥的个人网站 2016-05-05 22:44:05 浏览 2,003 次

寥寥几行代码,实现一个简单的元素选择器,兼容低版本 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. 前端必须掌握30个CSS3选择器 (阅读 5,125)
  2. jQuery之find选择器 (阅读 4,286)
  3. jQuery选择器探讨进阶 (阅读 4,181)
  4. 一种基于匹配回朔的 css3 选择器引擎实现 (阅读 3,725)
  5. jQuery选择器对应的DOM API ——选择元素 (阅读 3,722)
  6. 推荐三十款CSS样式选择器代码 (阅读 3,662)
  7. 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快! (阅读 3,583)
  8. CSS选择器 (阅读 3,402)
  9. IE7浏览器下CSS属性选择器二三事 (阅读 1,224)