JavaScipt 源码解析 css选择器

css1-css3提供了很多选择器，总得来说分为几大类：

群组选择器：逗号"，"

简单选择器：ID，标签，类，属性，通配符

关系选择器：孩子，后代，兄弟，相邻

伪类选择器：动作伪类，目标伪类，语言伪类，状态伪类，结构伪类，取反伪类。

群组选择器用于分组合并多个处理的结构

selector1，selector2，selectorN

简单选择器# . [ * 这些都有内置原生API的支持，不过存在兼容问题。

属性选择器在css2.1中只有4种。

[attr][attr=val][attr~=val][attr|=val]

css3中又增加了3种：

[attr^=val][attr$=val][attr*=val]

除此外jQuery还实现了自定义的属性选择器

[attrubute!='value'][attributeFilter1][attributeFilter2][attributeFilterN]

关系选择器

parent>child

prev+next

pre~siblings

伪类

基本筛选器：eq get first last it not odd root.....

内容筛选器: contains empty has parent.....

可见筛选器：hidden visible

子元素筛选器：first-child nth-child only-child.......

表单：bottom checkbox foucs input text.......

内置方法的兼容处理

关于属性attributes

简单来说，就是ie8之前的版本，需使用getAttribute('className')才能获得class属性的值，ff以及ie8之后的版本是w3c的标本getAttribute('class').

这是因为ie混淆了DOM对象属性及HTML标签属性attribute，造成了对setAttribute，getAttribute的不正确实现

关于getElementById

查找元素是最常见的DOM操作，我们可以使用document对象提提供的方法。

document.getElementById

取到有id的元素节点

var div = document.getElementById("myDiv");

这个是最常见的处理，但是如果id是小写

var div = document.getElementById(mydiv);//ie7之前是可以的。ie8之前是不区分大小写的

除此外，如果页面有多个id相同，也只会返回文档中第一次出现的元素，ie之前在针对表单的处理时候，表单的name和id重名，并且name在id之前，则会返回表单元素

关于getElementByTagName

如果选择器是通配符 * 的话ie6-8会混杂注释节点，所以针对如果是tag为 *的情况，我们需要做一个兼容的处理。