zoukankan      html  css  js  c++  java
  • html5新增选择器

             分享点html5的学习笔记,比较基础,突然发现通过写博客来记笔记有很多优点呢,平常记得笔记比较简单,复习起来比较吃力,看自己的博客理解起来还比较轻松,而且只有真正理解了才能表达清楚让别人看懂,还锻炼语言表达能力呢,所以有条件就多写点东西吧

    选择器

      1 querySelector(如果是一组元素,只能获取到一组中的第一个元素)

     document.querySelector("#div1");
    
     document.querySelector(".div1");
    
     document.querySelector("[title=hello]");

    2  querySelectorAll (可以获取一组元素,不过不能直接给所有元素设置样式,得用循环)

    document.querySelectorAll(".box");

    3 getElementsByClassName(只针对class,相见恨晚的选择器)

    document.getElementsByClassName('box')

     

    html5提供了class列表属性以及操作class的方法

    classList  :得到的是所在节点的所有class     返回类似数组的对象类型

    length :  class的长度

    add()  :  添加class方法

    remove()  :  删除class方法

    toggle() :  切换class方法      toggle("a")  如果列表中存在a 就执行删除操作,不存在就执行添加操作 

     var oDiv =  document.querySelector("#div1");
     oDiv.classList.length // 3
     oDiv.classList.add("div0")//增加class  其他用法大致相同

     

     <div class="div1 div2 div3" id="div1"></div>

     

  • 相关阅读:
    VS2017+MPI10.0安装与环境配置
    数组翻转(非reverse)
    判断一个字符串中出现次数最多的字符,统计这个次数
    Mock模拟数据,前后端分离
    js放大镜
    360度全景图片
    照片墙应用
    KindEditor配置和使用
    关于IIS的错误 312 (net::ERR_UNSAFE_PORT):未知错误
    从C到C++:命令行参数
  • 原文地址:https://www.cnblogs.com/moqing/p/5605101.html
Copyright © 2011-2022 走看看