<span style="white-space:pre"> </span>/*
1、getElementsByClassName()方法。
HTML5添加的getElementByClassName()的方法是最受欢迎的一个方法,可以通过document
对象及所有的HTML元素调用该方法。这个方法最早出现在javaScript库中,是通过既有
DOM功能实现的,而原生的实现有极大的性能优势。
getElementsByClassName()方法接收一个参数,即一个包含一或者多个类名的字符串,
返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。来看看
下面的列子。
*/
//取得所有类中包含“userName”和“current”的元素,类名的先后顺序无所谓
var allCurrentUserName = document.getElementByClassName("userename current");
//取得ID为“myDiv”的元素中带有类名“selected”的所有元素
var selected = document.getElementsById("myDiv").getElementsByClassName("selected");
/*
调用这个方法时,只有位于调用元素子树中的元素才会返回。在document对象上调用
getElementsByClassName()始终会返回与类名匹配的所有元素,在元素中调用该方法就只会
返回后代元素中匹配的元素。
使用这个方法可以更方便地带有某些类的元素添加事件处理程序,从而不必在局限于使用
ID或标签名。不过别忘了,因为返回的对象是NodeList,所以使用这个方法与使用
getElementsByTagName()以及其他返回NodeList的DOM都具有同样的性能问题。
支持getElementsByClassName()方法的浏览器有IE9+、Firefox 3+、Safari 3.1+、Chrome
和Oprea 9.5+。
2.classList属性
在操作类名时,需要className属性添加、删除和替换类名。因为className中的一个字符串、
所以只修改字符串的一部分,也必须每次都设置整个字符串的值。比如,以下面的HTML代码
为例。
<div class = "bd user disabled"></div>
这个div元素一共三个类名。要从中删除一个类名,需要把这三个类名拆开、删除不想要的那个,
然后再把其他类名拼成一个新的字符串。请看下面例子。
*/
//删除“user”类
//首先、取得类名字符串并拆分成数组
var className = div.className.split(/\s+/);
//找到要删除的类名
var pos = -1;
i,
len;
for(i = 0,len = classNames.length ; i < len; i++){
if(className[i] == "user"){
pos = i;
break;
}
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重置
div.className = className.join(" ");
/*
为了从<div>元素的class属性中删除“user”,以上代码都是必须的。必须通过类似的算法替换
类名并确认元素是否包含该类名。添加类名可以通过拼接字符串完成。但是必须检测确定不会
多次添加相同的类名。很多javaScript库都实现了这个方法,以简化这些操作。
HTML5新增了一种操作的类名的方式,可以让操作更加简单更加安全,那就为所有的元素添
加classList属性。这个classList属性是新集合类型DOMTokeList的实例。与其他DOM集合类似。
DOMTokeList有一个表示自己包含多少个元素的length属性,而要取得每一个元素可以使用item()
方法,也可以使用方括号语法。此外这个新类型还定义如下方法。
add(value):将给定的字符串添加到列表中。如果值已经存在,就不添加了。
contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
remove(value):从列表删除给定的值。
toggle(value):如果列表中存就删除该值,如果不存在则添加该值。
下面是这些方法使用的例子:0
*/
//删除“disabled”类
div.classList.romove("disabled");
//添加“current”类
div.classList.add("current");
//切换“user”类
div.classList.toggle("user");
//确定元素是否包含既定的类名
if(div.classList.contains("bd") && !div.classList.contains("disabled")){
//执行操作
}
//迭代类名
for(var i = 0,len = div.classList.length; i<len; i++){
doSomething(div.classList[i]);
}
/*
有了classList属性,除非你需要全部删除所有的类名,或者完全重写元素的class属性,
否则也就用不到className属性了。
支持classList属性的浏览器有了Firefox 3.6+和Chrom。
*/