整理总结：JS DOM中对className的选择，添加和删除

1. 对相同className的元素的选择

/*方法*/
function getByClass(oParent, sClassName) {
    var aEls = oParent.getElementsByTagName("*"); //选择确定父元素内所有元素
    var arr = [];
    for (var i = 0; i < aEls.length; i++) {
        var aClassName = aEls[i].className.split(' '); //将所选元素的classname拆分为数组
        for (var j = 0; j < aClassName.length; j++) {//遍历这个数组进行判断
            if (aClassName[j] == sClassName) { 
                arr.push(aEls[i]); //将含有要找的className的元素存在数组中
            }
        }
    }
    return arr; //得到在确定父元素下具有某个className的所有元素，然后就可以方便的调用了
}

例如：

<!--我的html部分-->
<style>
p{width:100px;height:20px;background-color: yellow;}
</style>
<title>studyUp</title>
<body>  
<div>
    <p class="cnp cnp1"></p>
    <p class="cnp cnp2"></p>
    <p class="cnp3"></p>
</div>

/*我的js部分*/
var oDiv=document.getElementsByTagName('div')[0];
var aCnp=getByClass(oDiv,"cnp");
for (var i = 0; i < aCnp.length; i++) {
    aCnp[i].innerHTML="123";
};

实现效果：（要在class=”cnp”的元素里写上123）

2.对className的添加

/*方法*/
function addClass(obj, className) {

    if (obj.className == "") {
        obj.className = className;
    } else {
        var arr = obj.className.split(" ");//利用class间的空格将其拆分为数组
        if (arrIndexOf(arr, className) == -1) {//这个元素里面已经存在另外的class的判断
            obj.className += " " + className;
        }
    }
}
//判断一个数组中的某一个值是否存在，存在返回相应的位置否则返回-1；
function arrIndexOf(arr,aValue){
    for(var i=0;i<arr.length;i++){
        if(arr[i]==aValue){
            return i;
        }
    }
    return -1;
}

例如：

<!--我的html部分-->
<div>
    <p class="cnp cnp1"></p>
    <p class="cnp cnp2"></p>
    <p class="cnp3" id="p3"></p>
</div>

/*我的js部分*/
var oP3=document.getElementsByTagName('p3');
addClass(p3,"cnp");

实现效果：（第三个p标签中多了cnp的类名）

3.对className的删除

/*方法*/
function removeClass(obj, sClassName) {
    var arr = obj.className.split(" ");
    if (arrIndexOf(arr, sClassName) != -1) {
        arr.splice(arrIndexOf(arr, sClassName), 1);
        obj.className=arr.join(" ");
        //删除这个类名并将整个类名组重新转为字符串
    }
}

例如：

<!--我的html部分-->
<div>
    <p class="cnp cnp1"></p>
    <p class="cnp cnp2"></p>
    <p class="cnp3" id="p3"></p>
</div>

/*我的js部分*/
var oP3=document.getElementsByTagName('p3');
removeClass(p3,"cnp3");

实现效果：（第三个p标签中的class不见了）