DOM — 在HTML文档中查找元素
通过类和CSS选择器(selector)能实现在HTML文档中查找元素。通过类名来定位元素是一种很普遍的技术,2003年由Simon Willison(http://simon.incutio.com/)普及,而原创的则是Andrew hayward(http://www.mooncalf.me.uk/)。该技术通过遍历所有的元素直到找到指定类的元素。[code lang="js"]
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]
[/code]
使用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”); // 所有 元素中的
元素
cssQuery(“div,p,form”); // 所有,
和 元素
var p = cssQuery(“p,div”); // 查找所有
和 元素
cssQuery(“a”,p); //然后查找这些元素内的 a 元素
cssQuery的更多信息可以从其网站中获取(http://dean.edwards.name/my/cssQuery/)
jQuery
jQuery类似于cssQuery,提供了完整的CSS1-3的支持,同时也有基本的XPath的支持。例如:
$(“div.links[p]“) // 所有类值为 links, 同时内有p元素的 元素
$(“p,div”).find(“*”) // 查找
和 元素的后裔元素
$(“a[@href^=‘google.com’]:even”) // 查找指向 google 的所有偶数链接
jQuery的更多信息可以从其网站中获取(http://jquery.com/)
XPath
XPath是定位XML文档的方式,相对于CSS选择器它的功能更多也更强大。下表比较了一些CSS选择器和XPath表达的某些不同:
目标
CSS 3
XPath
所有元素
*
//*
所有 <p> 元素
p
//p
<p> 的子元素
p>*
//p/*
由id获取元素
#foo
//*[@id=‘foo’]
由类获取元素
.foo
//*[contains[@class, ‘foo’)]
由属性获取元素
*[title]
//*[@title]
<p> 的第一个子元素
p>*:first-child
//p/*[0]
所有拥有子元素的 <p>
不支持
//p[a]
下一个元素
p + *
//p/下一个兄弟元素::*[0]
有关XPath的两个规范的网址是:
XPath 1.0: http://www.w3.org/TR/xpath/
XPath 2.0: http://www.w3.org/TR/xpath20/