技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 元素选择器 - Mini Query

元素选择器 - Mini Query

浏览:1093次  出处信息

寥寥几行代码,实现一个简单的元素选择器,兼容低版本 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选择器    (阅读:4170)
  2. jQuery选择器探讨进阶    (阅读:3392)
  3. jQuery之find选择器    (阅读:3278)
  4. CSS选择器    (阅读:2864)
  5. 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!    (阅读:2836)
  6. 推荐三十款CSS样式选择器代码    (阅读:2722)
  7. 一种基于匹配回朔的 css3 选择器引擎实现    (阅读:2735)
  8. jQuery选择器对应的DOM API ——选择元素    (阅读:2158)
  9. IE7浏览器下CSS属性选择器二三事    (阅读:517)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1