首页 » DOM » classList

classList

在操作类名时,需要通过className属性添加、删除和替换类名。因为className中是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。比如,以下面的HTML代码为例:

<div class="bd user disabled">...</div>

这个<div>元素一共有三个类名。要从中删除一个类名,需要把这三个类名拆开,删除不想要的那个,然后再把其它类名拼成一个新字符串。请看下面的例子。

//删除"user"类
//首先,取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);

//找到要删的类名
var pos = -1,
    i, len;
for(i = 0, len = classNames.length; i < len; i++) {
    if(classNames[i] == "user") {
        pos = i;
        break;
    }
}

//删除类名
classNames.splice(i, 1);

//把剩下的类名拼成字符串并重新设置
div.className = classNames.join(" ");

为了从<div>元素的class属性中删除”user”,以上这些代码都是必须的。必须的通过类似的算法替换并确认元素中是否包含该类名。添加类名可以通过拼接字符串完成,但必须要通过检测确定不会多次添加相同的类名。很多JavaScript库都实现了这个方法,以简化这些操作。

HTML5新增了一种操作类名的方式,可以让操作更简单也更安全,那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。与其它DOM集合类似,DOMTokenList是一个表示自己包含多少元素的length属性,而要取得每个元素可以使用item()方法,也可以使用方扩号语法。此外,这个类型还定义如下方法。

  • add(value):将指定的字符串值添加到列表中。如果值已经存在,就不添加了。
  • contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
  • remove(value):从列表中删除指定的字符串。
  • toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。

这样,前面那么多代码用下面这一行代码就可以代替了:

div.classList.remove("user");

以上代码能够确保其它类名不受此次修改的影响。其它方法也能极大地减少类似基本操作的复杂性,如下面的例子所示:

//删除"disabled"类
div.classList.remove("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+和Chrome。

此文章发表在 DOM. 将 固定链接 加入收藏.