通过类和CSS选择器(selector)能实现在HTML文档中查找元素。通过类名来定位元素是一种很普遍的技术,2003年由Simon Willison(http://simon.incutio.com/)普及,而原创的则是Andrew hayward(http://www.mooncalf.me.uk/)。该技术通过遍历所有的元素直到找到指定类的元素。
function class(name,type) { var r = []; // 定位到类值上(允许多类值) var re = new RegExp("(^|\\s)" + name + "(\\s|$)"); // 限制类型的查找,或者遍历所有元素 var e = document.getElementsByTagName(type || "*"); for ( var j = 0; j < e.length; j++ ) // 如果元素拥有指定值,把它添加到返回值中 if ( re.test(e[j]) ) r.push( e[j] ); // 返回符合的元素列表 return r; } [/code] 如果要查找类值为 test 的所有元素,可以这样: [code lang="html"] hasClass("test"") 查找类值有 test 的 <li> 元素 hasClass("test","li") 查找类值有 test 的 <li> 元素中的第一个 hasClass("test","li")[0]
使用CSS选择器查找元素
CSS选择器是用于赋予元素样式的表达式。随着CSS标准的每次修订,选择器规范增加了越来越多的重要特点,由此开发者更容易精确定位到所需要的元素。不幸的是,浏览器对CSS2和CSS3的实现非常慢,建议浏览W3C的这些主题页面:
CSS 1 selectors: http://www.w3.org/TR/REC-CSS1#basic-concepts/
CSS 2 selectors: http://www.w3.org/TR/REC-CSS2/selector.html
CSS 3 selectors: http://www.w3.org/TR/2005/WD-css3-selectors-20051215/
每种选择器规范可用的特点基本差不多,每一个后续的版本也都包含前一版的所有特点。同时,新版都会增加一系列新的特点。例如:
#main
元素(CSS1)
div.items > p: 查找类值为items的
(CSS2)
div:not(.items): 查找没有items类的
cssQuery
第一个完全支持CSS1-3的公开库是cssQuery,由Dean Edwards(dean.edwards.name)创立。cssQuery用于通过CSS选择器来查找元素。例如:
cssQuery(“div > p”); // 所有
元素
cssQuery(“div,p,form”); // 所有
和