1、getElementsByclassName()方法
<body> <div class='a1'>klkx1</div> <ul id='ul1'> <li class='a1 a2'>1</li> <li class='a2 a3'>2</li> <li>3</li> <li>4</li> </ul> <div class='a1'>klkx2</div> <script> var a1 = document.getElementsByClassName('a2 a3');//获取所有 class 同时包括 'a2' 和 'a3' 的元素. var a2 = document.getElementsByClassName('a1');// var arr = [].filter.call(a2,function(a){ return a.nodeName === 'LI'; }); arr[0].style.background='red'; a1[0].style.background = 'blue'; </script> </body>
getElementsByClassName('一个参数') 也可以是类中包含多个元素,类名的先后顺序无所谓
2、classList属性
这个属性属性属于:[object DOMTokenList]
操作类名,需通过className属性添加、删除和替换类名,但是clasName是字符串
即使只修改字符串的一部分,也必须每次都设置整个字符串的值
普通的做法:
<body> <div class='div1 div2 div3'>klkx<div> <script> var oDiv = document.getElementsByTagName('div')[0]; var classNames = oDiv.className.split(/s+/);//以空格为标记划分为数组 var i, len = classNames.length; for (i=0;i<len ;i++ ) { if (classNames[i] === 'div2') { break; } } console.log(i); classNames.splice(i,1);//删除要删除的项 oDiv.className = classNames.join(' ');//然后再以' '拼接为字符串 </script> </body>
以上代码是必须的,如果想添加类名,可以用拼接字符串进行添加
但是需要检测,添加的类名是否重复
所以H5新增了一些方法
那就是给所有的元素添加了classList属性
该属性是新集合类型:DOMTokenList的实例,是一个对象,也是一个类数组对象,有length属性
所以该对象也有item()方法也可以使用[]方括号写法
该类型还定义如下方法:
add(value):将给定的字符串值添加到列表中,如果已经存在就不添加了
contains(value):表示列表中是否存在给定的值,如果存在就返回true,不存在就返回false
remove(value):从列表中删除给定的字符串,无论存在与否,都返回undefined
toggle(value):如果列表中已经存在给定的值,就删除它,如果没有就添加给定的值