zoukankan      html  css  js  c++  java
  • 第87天:HTML5中新选择器querySelector的使用

    一、HTML5新选择器

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

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

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

    4、注意:

    • document.querySelector(selector);//返回第一个满足选择器条件的元素,一个DOM对象
    • document.querySelectorAll(selector);//返回所有满足该条件的元素,元素类型是dom的数组
    • $('.item');//返回一个jQuery对象(dom元素的数组)
    • 本质上jQuery方式和querySelector方式都是获取DOM数组,只不过jquery会多一些其他成员
    • DOM数组的每一个成员注册事件不能像jquery一样直接注册,必须分别给每个元素注册
    • html5就是将经常需要的操作又包装一层

    实例:

     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");

  • 相关阅读:
    Monkey测试
    第八周作业-说说本周项目工作中的情况
    第七周作业-谈谈各种文档
    第六周作业-UML在详细设计阶段的使用心得&&UML建模与软件开发过程模型
    第五周作业-Markdown的使用心得
    第四周作业-Java Web学习心得
    第三周作业-谈谈对编程规范的认识
    第二周作业-软件工作量的估计
    支付宝-发展史及其优缺点
    三种软件的特点分析
  • 原文地址:https://www.cnblogs.com/le220/p/7854104.html
Copyright © 2011-2022 走看看