日期:2014-05-16  浏览次数:20456 次

关于选择器
关于选择器

最近选择器挺多,感觉这样编程的确很效率。于是研究了下选择器的实现。

研究对象是 司徒正美 发布的选择器包 http://bbs.51js.com/thread-86703-1-1.html

我们先说说选择器的主要技术点:
1. 选择器几乎都首先使用querySelectorAll,如果失败或者不存在这个方法,才会执行内部的动作。

2. 在非IE浏览器下支持:
DOMAttrModified 标签属性修改时
DOMNodeInserted 标签插入时
DOMNodeRemoved 标签删除时

但是document.write所创建的标签是无法被监视的,并且原身文件的HTML也无法被监视。他们只能激发JS操作对象产生的事件。


额外说明:
1 屏蔽querySelectorAll,直接替换所有文件的关键字querySelectorAll


已知明显BUG:
1. querySelectorAll是根据CSS规则来匹配的,如果你的页面中包含多个id,匹配#id, 那么大部分的选择器都会只返回第一个id标签,并且还会导致其他选择器的执行出现结果不正确。
  测试:首先必须屏蔽所有querySelectorAll,在 template.html 中写入标签 <div id="title"></div>,这时执行选择器 div[class!=example],除了query所有选择器结果都错误,多了一位。
2. querySelectorAll是根据CSS来匹配的,#title 会返回所有id为 title 的多个标签,选择器有Peppy、query、Sly,结果不统一,支持querySelectorAll就返回多个,不支持就返回第一个。
3. peppy、sizzle选择器在非IE浏览器中,在加载HTML时执行选择器,那么会创建缓存,而将来不激发DOMAttrModified、DOMNodeInserted、DOMNodeRemoved,那么缓存会一直存在,无法获取到HTML后来加载的标签。
4. EXT 对选择器 div ~ p 的匹配结果错误


------解决方案--------------------
路过看看
------解决方案--------------------
这是要散分的吗
------解决方案--------------------
一个id只能连接发三个回复,你发在一起或者发成自己的日志吧
------解决方案--------------------
一个id只能连接发三个回复,你发在一起或者发成自己的日志吧
------解决方案--------------------
这是在说什么呢?