zoukankan      html  css  js  c++  java
  • HTML5JS API新的选择器

    新的选择器
    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>实例</li>
     4     
     5 <li class="exp">实例</li>
     6     
     7 <li class="exp">实例</li>
     8     
     9 <li class="exp">实例</li>
    10     
    11 <li>实例</li>
    12 
    13   </ul>
    14 
    15 </div>

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


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


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

  • 相关阅读:
    背包解法
    第十六周周总结
    软件工程个人课程总结
    学期课后个人总结
    spring事务
    梦断代码03
    团队冲刺的第二十四天
    第十五周周总结
    百度输入法评价
    找到水王
  • 原文地址:https://www.cnblogs.com/asqq/p/2556944.html
Copyright © 2011-2022 走看看