陈童的博客's Archivers

From everyinch on 2013-12-04 19:04:30

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/

    查看完整版本: DOM — 在HTML文档中查找元素

    Tags:


  • ©陈童的博客