- getByClass方法
- 目的：通过指定的一组class名，获取包含其的一组元素，返回一个数组
- 参数：strClass:指定一组class名字符串； parent:父级元素； 返回值：数组
- 思路：
- 判断浏览器种类，标准浏览器下可以使用
document.getElementsByClassName(strClass)来获取所有元素集合，但是需要将类数组转成数组；
- IE6,7,8浏览器下，自己封装方法
- 获取父级元素下的所有元素集合
- 新建空数组ary
- 将strClass字符串一定要加工，去掉其前后的空格，所以要添加
strClass.replace(/(^ +)|( +$)/g,""),将字符串开头和结尾的空格替换为空字符，即删除掉，然后再利用split进行分割；
- 将strClass字符串利用空格分割成数组aryClass，正则表达式：
/\s+/g，其中全局属性g，可有可无；
- 遍历元素集合，获得每个元素的class名，然后遍历aryClass数组，利用正则判断元素的class名中是否存在aryClass数组中所有项，只要有一项不存在，就阻断数组遍历，不合格；
- 如何判断什么样的元素可以插入到新建的空数组中，利用一个开关bOk，在元素集合遍历时，给其赋值为true，当数组遍历校验中，如果有一项不匹配，那么给bOk赋值为false，并添加break中断for循环；待数组遍历完成，判断bOk的布尔值，如果为true，代表所有数组遍历中均匹配，满足条件，将此元素插入到数组ary中，如果为false，则不插入；
- 待元素集合遍历完成后，返回ary;
- 知识点：
-
var aEle=parent.getElementsByTagName("*");代码代表获取parent父级元素下的所有元素集合；
-
strClass=strClass.replace(/(^ +)|( +$)/g,""),过滤传入的实参strClass,将其前后空格删除，其中正则表达式/(^ +)|( +$)/g,代表的含义是："开头为一个或多个空格"或"结尾为一个或多个空格"，进行全局查找替换；正则表达式可以写成：/(^\s+)|(\s+$)/g;
-
var reg=new RegExp("\\b"+aryClass[j]+"\\b");正则创建为实例创建，需要加引号，需要转义，可以进行变量拼接；其中\b代表开头，结尾，空格；而字面量创建，不需要加引号，不需要转义，不能进行变量拼接；
- bOk思想的运用，解决for循环中的不满足情况问题；
- 注意点：
- 添加的参数strClass字符串中，开头结尾不能有空格，不然会被split分割成空元素，添加到数组中，在验证时，虽然结果不会影响，但是不利于代码优化，所以在传入实参后，必须对其进行过滤，将开头与结尾的空格去除掉；
<body>
<div class="wrap" id="wrap">
<div class="div1 div2 div3 div4">1</div>
<div class="div1 div2 div3">2</div>
<div class="div1 div2">3</div>
<div class="div1">4</div>
<p class="div1 div2 div3">5</p>
<span>6</span>
</div>
<script>
//传入的strClass不能有前后空格，所以要删除，才能转化为数组
var oWrap=document.getElementById("wrap");
function getByClass(strClass,parent) {
parent=parent || document;
//标准浏览器
if("getComputedStyle" in window){
//类数组转数组
return Array.prototype.slice.call(parent.getElementsByClassName(strClass));
}
//IE6,7,8浏览器
var ary=[];
var aEle=parent.getElementsByTagName("*");//*代表获取左右的元素
var aryClass=strClass.replace(/(^ +)|( +$)/g,"").split(/\s+/);//正则也可以写成/空格+/,split中正则的全局g可有可无；
for(var i=0; i<aEle.length; i++){
var bOk=true;
//目的，strClass中的字符串转为数组，然后遍历每一项，去比较aEle[i]中的class是否存在，有一项不存在就终止
var curEle=aEle[i];
var strEleClass=curEle.className;
for(var j=0; j<aryClass.length; j++){
var reg=new RegExp("\\b"+aryClass[j]+"\\b");//实例创建：需要加引号，需要转义，可以变量拼接
if(!reg.test(strEleClass)){
bOk=false;
break;
}
}
if(bOk){
ary.push(curEle);
}
}
return ary;
}
console.log(getByClass(" div1 div2 div3 ",oWrap));
</script>
</body>
- hasClass方法
- 目的：判断元素身上，是否存在某一个指定的class名
- 参数：ele:元素； cName:指定class名； 返回值：布尔值
- 注意点：
-
cName=cName.replace(/(^\s+)|(\s+$)/g,"");给传入的实参字符串class过滤掉前后空格；
-
var reg=new RegExp("\\b"+cName+"\\b");代码中的正则表达式添加前后\\b的目的是为了防止元素的class名上会包含被检测字符，必须加上前后\\b,其中\b代表：开头、结尾、空格，在实例创建中，需要转义；
-
var reg=new RegExp("(^|\\s+)"+cName+"(\\s+|$)")，代码为上述正则表达式的严格写法，其中\s代表空格，需要转义，(^|\\s+)指的是开头或多个空格；
- 例：如果cName为"div1",而元素身上的class名为"divdiv1 div2 div3",如果不添加
\\b，那么验证就会成功，进而出错；
<script>
function hasClass(ele, cName) {
cName=cName.replace(/(^\s+)|(\s+$)/g,"");
var reg=new RegExp("\\b"+cName+"\\b");//严格写法：("(^|\\s+)"+cName+"(\\s+|$)"),实例创建中"\s"需要转义；
return reg.test(ele.className);
}
</script>
- addClass方法
- 目的：给元素身上添加一组class名，要先判断元素身上是否已存在需添加class名
- 参数：ele：元素； strClass：待添加的class名 返回值：无；
- 注意点：
-
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")开始对传入的实参strClass进行过滤
-
ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")，在拼接之前规范原有的字符串；
-
ele.className+=" "+aryClass[i];字符串拼接时，要拼接空格；
<script>
function addClass(ele,strClass) {
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");//把传进来的strClass进行过滤，删除开头结尾空格
var aryClass=strClass.split(/\s+/g);
for(var i=0; i<aryClass.length; i++){
if(!this.hasClass(ele,aryClass[i])){
//1 开头结尾去掉空格 2 中间多个空格，变为一个空格
ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")；//在拼接之前删除原来字符串的开头结尾空格，将中间多个空格，变为一个空格；
ele.className+=" "+aryClass[i];//拼接新的class名，前面拼接上一个空格；
}
}
}
</script>
- removeClass方法
- 目的：删除元素身上的class名，要判断元素身上是否已存在要删除的class;
- 参数：ele:元素； strClass：待删除的class名 返回值：无；
- 注意点：
-
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")开始对传入的实参strClass进行过滤；
-
ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");，在验证要删除的class名元素身上存在后，利用replace进行替换删除，替换为空格，然后再对替换完的字符串进行规范：1）删除开头结尾空格，2）将字符中间的多个空格，替换为一个空格；
<body>
<div class="wrap" id="wrap">
<div class="div1 div2 div3 div4">1</div>
<div class="div1 div2 div3">2</div>
<div class="div1 div2">3</div>
<div class="div1">4</div>
<p class="div1 div2 div3">5</p>
<span>6</span>
</div>
<script src="utils2.js"></script>
<script>
var oWrap=document.getElementById("wrap");
var aDiv=oWrap.getElementsByTagName("div");
function removeClass(ele,strClass){
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");
var aryClass=strClass.split(/\s+/g);
for(var i=0; i<aryClass.length; i++){
if(utils.hasClass(ele,aryClass[i])){
ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");
}
}
}
removeClass(aDiv[0],"div1 div3 ");
console.log("("+aDiv[0].className+")")//结果为："(div2 div4)"
</script>
</body>
