H5新增属性classList

h5中新增了一个classList，原生js可以通过它来判断获取dom节点有无某个class。

classList是html元素对象的成员，它的使用非常简单，比如

console.log(document.body.classList);　

目前已知classList API有length,item,add,remove,toggle,contains

length

静态属性。可以获取元素类名的个数，使用方式：

var len = document.body.classList.length;

item( Number )

方法。可以获取元素的类名，接受一个参数，即数字索引。使用方式：

//如果index超出范围，则返回null

var cls = document.body.classList.item(index);

add( String [, String] )

方法。可以给元素添加类名，就像jquery中的addClass()。使用方式：

document.body.classList.add('myclass');

//遗憾的是，它一次性只能增加一个类，比如以下方式将会报错

//document.body.classList.add('class1 class2');　

remove( String [,String] )

方法。可以将元素的类名删除，就像jquery中的removeClass()。和add()方法一样，一次只能删除一个类名。使用方式：

 document.body.classList.remove('myclass');　

toggle( String [, force] )

方法。可以给元素交替增加类名和删除类名，就像jquery中的toggleClass()。

当只有一个参数时：切换 class value，即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。

当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它。

使用方式：

document.body.classList.toggle('myclass');　　

contains( String )

方法。可以检测判断元素是否包含某个类名，返回false或true。使用方式：

document.body.classList.contains('myclass'); //返回true或者false　

示例

 // div是具有class =“foo bar”的<div>元素的对象引用

    div.classList.remove("foo");

    div.classList.add("anotherclass");

    // 如果visible被设置则删除它，否则添加它

    div.classList.toggle("visible");

    // 添加/删除 visible，取决于测试条件，i小于10

    div.classList.toggle("visible", i < 10);

    alert(div.classList.contains("foo"));

    //添加或删除多个类

    div.classList.add("foo","bar");

    div.classList.remove("foo", "bar");　　

H5在移动端的兼容性相对来说已经很不错，在不用jquery的时候，使用H5的新属性，可以省下不少功夫的

另外判断dom节点有无某个class的方法可以通过getAttribute()这个方法。即

 <html>

        <head>

        </head>

        <body>

            <div>

                <p>1</p>

                <p class="test">2</p>

                <p>3</p>

            </div>

            <script>

            var p = document.getElementsByTagName('p');

                for(var i = 0;i <p.length;i++){

                //方法一

                    if(p[i].className=='test'){

                        console.log(p[i].innerHTML)

                    }

                //方法二，用getAttribute()这个方法

                    //if(p[i].getAttribute("class")=='test'){

                    //console.log(p[i].innerHTML);

                    //}

                }

            </script>

        </body>

        </html>

　　

h5的classList对象的更多相关文章

  1. 移动端通过ajax上传图片（文件）并在前台展示——通过H5的FormData对象

    前些时候遇到移动端需要上传图片和视频的问题,之前一直通过ajax异步的提交数据,所以在寻找通过ajax上传文件的方法.发现了H5里新增了一个FormData对象,通过这个对象可以直接绑定html中的f ...

  2. H5的FormData对象完成ajax上传文件multiFile

    最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...

  3. h5笔记02

    Markdown 用普通文本描述富文本的语法 扩展名md,markdown 链接:http://wowubuntu.com/markdown/ 代表h标签 没有符号的代表段落 -符号代表无序列表 1. ...

  4. 使用HTML5里的classList操作CSS类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  5. 用PHP+H5+Boostrap做简单的音乐播放器（进阶版）

    前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...

  6. 项目分享五：H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...

  7. javascript高级程序设计---Element对象

    Element对象对应网页的HTML标签元素.每一个HTML标签元素,在DOM树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1,但是不同HTML标签生 ...

  8. HTML5 classList API接口

    原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...

  9. HTML DOM classList 属性

    页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...

随机推荐

  1. SPI 用户空间的读写操作

    spi_device 虽然用户空间不需要直接用到spi_device结构体,但是这个结构体和用户空间的程序有密切的关系,理解它的成员有助于理解SPI设备节点的IOCTL命令,所以首先来介绍它.在内核中 ...

  2. dotnet publish

    发布Release版本:dotnet publish --configuration Release 发布Debug版本:dotnet publish --configuration Debug

  3. 【数据库】：关于DB2数据库错误提示说明

    SQLSTATE 消息 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码类 代码 含义 要获得子代码, 参 ...

  4. html-css-js基本理解和简单总结

    目录 一.对于网页的基本理解 1.网页是一种数据展示和信息交互的载体 2.网页组成部分 3.支撑一个网页的技术模块 二.html的理解和技术笔记 1.html理解 2.html技术笔记-html标签 ...

  5. 本地jar包 安装到本地仓库中的命令

    maven 项目 本地jar包 安装到本地仓库中去: 首先进入到该文件所在文件夹内 若不在直接绝对路径就可以.注意命令中的空格 mvn install:install-file  -Dfile=文件名 ...

  6. thinkPHP5配置nginx环境无法打开（require(): open_basedir restriction in effect. File(/mnt/hgfs/root/tp5/thinkphp/start.php) is not within the allowed path(s)

    今天想把玩一下tp5,结果怎么都无法访问,每次都是报500错误,我把错误提示都打开看到下面的错误 require(): open_basedir restriction in effect. File ...

  7. python2和python3中列表推导式的变量泄露问题

    Python 2.x 中,在列表推导中 for 关键词之后的赋值操作可能会影响列表推导上下文中的同名变量.像下面这个 Python 2.7 控制台对话: Python 2.7.15 (default, ...

  8. Hive初始

    一.Hive概念 二.为什么要是用Hive 三.Hive优缺点 四.hive架构 一.Hive概念 Hive最初是应Facebook每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的 ...

  9. C#中的方法(函数)，委托和事件

    1. 先有方法,然后再有委托,最后再有事件 2. 思考能不能将 A方法 作为参数,传递给 B方法呢? eg: 在传统的编程方式中,A方法 调用 B方法的方式如下: //洗菜 public void W ...

  10. OSI及TCP/IP的概念和区别

    什么是TCP/IP协议 TCP/IP协议(Transfer Controln Protocol/Internet Protocol)叫做传输控制/网际协议,又叫网络通讯协议,这个协议是Internet ...