与类相关的扩充
HTML4在Web开发领域得到广泛采用后导致了一个很大的变化,即 class 属性用得越来越多,一方面可以通过它为元素添加样式,另一方面还可以用它表示元素的语义。于是,自然就有很多JavaScript代码会来操作CSS类,比如动态修改类或者搜索文档中具有给定类或给定的一组类的元素,等等。为了让开发人员适应并增加对 class 属性的新认识,HTML5新增了很多API,致力于简化CSS类的用法。
1. getElementsByClassName()方法
HTML5添加的 getElementsByClassName() 方法是最受人欢迎的一个方法,可以通过document对象及所有HTML元素调用该方法。这个方法最早出现在JavaScript库中,是通过既有的DOM功能实现的(如下ADS.getElementsByClassName()方法定义代码所示),而原生的实现具有极大的性能优势。
<script type="text/javascript"> function getElementsByClassName(className, tag, parent){ parent = parent || document; if(!(parent = $(parent))){return false;} //查找所有匹配的标签 var allTags = (tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag); var matchingElements = new Array(); //创建一个正则表达式。来判断className是否正确 className = className.replace(/\-/g, "\\-"); var regex = new RegExp("(^|\\s)" + className + "(\\s|$)"); var element; //检查每个元素 for(var i=0; i<allTags.length; i++){ element = allTags[i]; if(regex.test(element.className)){ matchingElements.push(element); } } //返回任何匹配的元素 return matchingElements; }; window["ADS"]["getElementsByClassName"] = getElementsByClassName; </script>
新增的getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。来看下面的例子。
//取得所有类中包含"username"和"current"的元素,类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("username current"); //取得ID为"myDiv"的元素中带有类名"selected"的所有元素 var selected = document.getElementById("myDiv").getElementsByClassName("selected");
调用这个方法时,只有位于调用元素子树中的元素才会返回。在document对象上调用getElementsByClassName()始终会返回与类名匹配的所有元素,在元素上调用该方法就只会返回后代元素中匹配的元素。
使用这个方法可以更方便地为带有某些类的元素添加事件处理程序,从而不必再局限于使用ID或标签名。不过别忘了,因为返回的对象是NodeList,所以使用这个方法与使用getElementsByTagName()以及其他返回NodeList的DOM方法都具有同样的性能问题。
支持getElementsByClassName()方法的浏览器有IE9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。