html查找文档,DOM — 在HTML文档中查找元素

通过类和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 的

元素

hasClass("test","li")

查找类值有 test 的

元素中的第一个

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

p: 查找id为main的元素下所有

元素中的

元素(CSS1)

div.items > p: 查找类值为items的

元素，然后定位到所有的子元素

(CSS2)

div:not(.items): 查找没有items类的

元素(CSS3)

cssQuery

第一个完全支持CSS1-3的公开库是cssQuery，由Dean Edwards(dean.edwards.name)创立。cssQuery用于通过CSS选择器来查找元素。例如：

cssQuery(“div > p”); // 所有