getElementByClassName

在JavaScript 内建的核心中，document对象及element对象总共可以通过三个方式来获取其下的元素，分别是:getElementById('id') 、getElementsByName('name') 、getElementsByTagName('tag')  。这些方法就跟它们的名字一样，分别是依照id, name, tag来获取元素。  
    因在同一份文件中，id 是具有唯一性的，所以 getElementById(id) 的回传值是单一物件可以直接使用；而其他则会传回一个依照具有该属性的元素在文件中出现顺序排列的数组，使用时必须指定数组索引，如: array[0] 代表第一个元素。可是在设计网页时，最常常需要使用到的class却没有相对应的方法可以去获取className相同的元素。没有没关系，我们自己写一个，而且代码非常简短只有下面几句。  
function getElementsByClassName(className) {
    var el = new Array();
    var _el = document.getElementsByTagName("*");
    for (var i=0; i<_el.length; i++ ) {
        if (_el[i].className == className) { 
            el[el.length] = _el[i]; 
        } 
    } 
    return el; 
}
    上面这段代码将会传回一个对象数组，这些对象的class名相同。该方法的缺点是只能在页面加载完成后才能获得正确结果，因为如果直接使用document.getElementsByTagName("*")得不到全部标签，只能得到body、head、script、body等几个自动加载或已经加载的标签。解决方法：可以将相关代码放到最后以便body标签加载完成后才执行。下面这段代码是 getElementsByClassName(className) 众多应用的其中一种，可以将文件中所有 className 为oldClassName的元素的className改为newClassName。  
function changeClassName(oldClassName, newClassName) {
    var classTest = getElementsByClassName(oldClassName); 
    for (var i=0; i<classTest.length; i++) {
        classTest[i].className = newClassName; 
    }
}