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

JavaScipt 源码解析 css选择器的更多相关文章

  1. JavaScipt 源码解析 Sizzle选择器

    jQuery的定位就是一个DOM的操作库,那么可想而知选择器是一个至关重要的模块.Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的 ...

  2. JavaScipt 源码解析 回调函数

    函数是第一类对象,这是javascript中的一个重要的概念,意味着函数可以像对象一样按照第一类管理被使用,所以在javascript中的函数: 能"存储"在变量中,能作为函数的实 ...

  3. JavaScipt 源码解析 数据缓存

    常见的内存泄露的几种情况: 循环引用 JavaScript闭包 DOM插入 一个DOM对象被一个JavaScript对象引用,同时又引用同一个或其他的JavaScript对象,这个DOM对象可能回引发 ...

  4. JavaScipt 源码解析 异步

    我们常见的异步操作: 定时器setTimeout postmessage WebWorkor CSS3 动画 XMLHttpRequest HTML5的本地数据 等等- JavaScript要求在与服 ...

  5. normalize.css源码解析

    什么是normalize.css?  它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...

  6. jQuery2.x源码解析(设计篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 这一篇笔者主要以设计的角度探索jQuery的源代 ...

  7. jQuery整体架构源码解析（转载）

    jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...

  8. dojo/query源码解析

    dojo/query模块是dojo为开发者提供的dom查询接口.该模块的输出对象是一个使用css选择符来查询dom元素并返回NodeList对象的函数.同时,dojo/query模块也是一个插件,开发 ...

  9. jQuery整体架构源码解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

随机推荐

  1. 关于Deprecated: mysql_result： The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in

    require_once('connect.php'); $sql = "select * from introduce"; \(query = mysql_query(\)sql ...

  2. java中特殊的String类型

    Java中String是一个特殊的包装类数据有两种创建形式: String s = "abc"; String s = new String("abc"); 第 ...

  3. Linux, Mac下Shell 数组 Array 的修理工

    我的测试基本都是在Mac,及Unix环境下测试的,如无特别注明,默认就是Mac 不论你看到这篇随笔是被shell array的奇淫巧技,还是发现shell array就在一对{}里面就可以做那么多勾当 ...

  4. 关于谷歌Chrome浏览器的两个Bug?

    1.网络资源下载莫名其妙的网络错误(也不支持续传?有时打开文件是损坏的?) 2.超级链接莫名的成了html下载?

  5. WWW 资源下载与表单提交

    在注册与验证用户信息,以及非即时通信的游戏中,我们可以使用WWW类使用短链接来完成客户端与服务器数据的通信,今天我们将使用用POST方法来完成的用户注册与登录,在最后介绍下其它资源的加载. 首先使用P ...

  6. S2_SQL_第三章

    3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table `demo01` rena ...

  7. windows下复制文件报错“文件名对目标文件夹可能过长 。您可以缩短文件名并重试，或者......”

    我将一个路径下文件夹复制到另一个路径下时,出现了报错,报错图片如下: 然后查资料发现: 1.文件名长度最大为255个英文字符,其中包括文件扩展名在内.一个汉字相当于两个英文字符.2.文件的全路径名长度 ...

  8. angular --- s3core移动端项目

    因为记性不好的原因做个草稿笔记 app.js中 var myApp = angular.module('myApp',['ui.router','oc.lazyLoad','ngAnimate','数 ...

  9. HDU3530【STL/单调队列/RMQ】

    题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=3530] 题意:输入n,m,k;n代表n个点,在这n(n<100000)个点中找到最长的连续子序列 ...

  10. Java并发（七）：双重检验锁定DCL

    双重检查锁定(Double Check Lock,DCL) 1.懒汉式单例模式,无法保证线程安全: public class Singleton { private static Singleton ...