getElementsByClassName – 学习画板

首页 » DOM » getElementsByClassName

getElementsByClassName

HTML5添加的getElementsByClassName()方法是最受人欢迎的一个方法,可以通过document对象及所有HTML元素调用该方法。这个方法最早出现在JavaScript库中,是通过既有的DOM功能实现的,而原生的实现具有极大的性能优势。

getElementsByClasName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的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+。

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