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为 *的情况,我们需要做一个兼容的处理。