UDN-企业互联网技术人气社区

板块导航

浏览  : 747
回复  : 1

[HTML5] HTML5之JS API-新的选择器

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 01:31:44 | 显示全部楼层 |阅读模式
    在过去我们使用js获得DOM节点的时候有以下几种方式:
    document.getElementById("#elementId");
    document.getElementsByName("elementName");
    document.getElementsByTagName("tagName");

    我们虽然可以使用上面的几种方式方便获得元素,但也有不便的地方,比如根据Class来获取元素,如果有需要,我们还必须自己写一个getElementsByClassName();方法,要么使用其他的JS类库;现在终于可以摆脱这折磨人的时代啦~

    新的选择器


    document.querySelector("selector");
    selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;
    支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

    document.querySelectorAll("selector");
    selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
    支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

    document.getElementsByClassName("selector");
    selector:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
    支持: Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

    案例如下:


    HTML结构如下


  1. <div class="content">
  2.   <ul>
  3.     <li>前端开发网(W3Cfuns.com)!</li>
  4.     <li class="w3c">前端开发网(W3Cfuns.com)!</li>
  5.     <li class="w3c">前端开发网(W3Cfuns.com)!</li>
  6.     <li class="w3c">前端开发网(W3Cfuns.com)!</li>
  7.     <li>前端开发网(W3Cfuns.com)!</li>
  8.   </ul>
  9. </div>
复制代码

    1、如果想要获得第一个li元素,我们只需要:
    document.querySelector(".content ul li");

    2、如果想要获得所有li元素,我们只需要:
    document.querySelectorAll(".content ul li");

    3、如果想要获得所有class为w3c的li元素,我们只需要:
    document.getElementsByClassName("w3c");



相关帖子

发表于 2015-9-17 15:27:29 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部