h5的classList对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5的classList对象相关的知识，希望对你有一定的参考价值。
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对象的主要内容，如果未能解决你的问题，请参考以下文章