DOM — 在HTML文档中查找元素

前端技术 everyinch 1485℃ 0评论

通过类和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&#91;j&#93;) ) r.push( e&#91;j&#93; );

    // 返回符合的元素列表
    return r;
}
&#91;/code&#93;

如果要查找类值为 test 的所有元素,可以这样:

&#91;code lang="html"&#93;
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

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/



转载请注明:陈童的博客 » DOM — 在HTML文档中查找元素

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量