与类相关的补充

JavaScript   第11章  DOM扩展

11.3  HTML5

11.3.1与类相关的补充

1.getElementsByClassName()方法:  HTML5添加的这个方法，是最受欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法，这个方法接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList，传入多个类名时，类名的先后顺序不重要。

var allCurrentUsernames = document.getElementsByClassName("username current");

var selected = document.getElementById("myDiv").getElementsByClassName("selected");

调用这个方法时，只有位于调用元素子树中的元素才会返回。在document对象上调用这个方法，会返回与这个类名匹配的所有元素，而在元素上调用这个方法只会返回后代元素中匹配的元素。

注意：

使用这个方法，可以更方便的为带有某些类的元素添加事件处理程序，从而不必再局限于使用ID或者是标签名，不过别忘了，因为返回的对象是NodeList，所以使用这个方法与使用getElementByTagName()以及其他返回NodeList的DOM方法都具有同样的性能问题。

兼容性：ie9以上

2.classList属性

在操作类名的时候，需要通过className属性去添加、删除和修改类名，因为className中是一个字符串，即使是只修改字符串的一部分，也每次都设置字符串的值，

例子：

...

这个

元素一共有三个类名。要从中删除一个类名，需要把这三个类名拆分开，删除不想要的那个，然后再将其他类名拼接成一个新的字符串。

//删除user类

//首先，取得类名字符串并拆分成数组

var classNames = div.className.split(/\s+/);

//找到要删除的类名

var pos = -1,i,len;

for(i=0; len = classNames.length; i

      if(className == " user "){

               pos=i;

              break;

      }

}

//删除类名

classNames.splice(i,1);

//把剩下的类名拼接成字符串并重新设置

div.className =  classNames.join(" ");

注意

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

add(value):将给定的字符串添加到列表中。如果值已经存在，就不添加了。

contains(value):表示列表中是否存在给定的值，如果存在就返回true，否则返回false。

remove(value): 从列表当中删除给定的字符串。

toggle(value): 如果列表中已经存在给定的值，删除它；反之添加它。

这样前面的那么多代码就可以用一行代码替换： div.classList.remove("user");

div.classList.add("add");

div.classList.remove("remove");

div.classList.toggle("toggle");

if(div.classList.contains("contains") &&  !div.classList.contains("disabled")){  执行操作  }

作用：除非你要全部删除类名，或者全部替换类名，否则没必要使用className属性

兼容性： Firefox 3.6+和chrome