- getByClass方法
- 目的：通過指定的一組class名醇王，獲取包含其的一組元素呢燥，返回一個(gè)數(shù)組
- 參數(shù)：strClass:指定一組class名字符串崭添； parent:父級(jí)元素寓娩； 返回值：數(shù)組
- 思路：
- 判斷瀏覽器種類，標(biāo)準(zhǔn)瀏覽器下可以使用
document.getElementsByClassName(strClass)來獲取所有元素集合呼渣，但是需要將類數(shù)組轉(zhuǎn)成數(shù)組棘伴；
- IE6,7,8瀏覽器下，自己封裝方法
- 獲取父級(jí)元素下的所有元素集合
- 新建空數(shù)組ary
- 將strClass字符串一定要加工屁置，去掉其前后的空格焊夸，所以要添加
strClass.replace(/(^ +)|( +$)/g,""),將字符串開頭和結(jié)尾的空格替換為空字符，即刪除掉蓝角，然后再利用split進(jìn)行分割阱穗；
- 將strClass字符串利用空格分割成數(shù)組aryClass饭冬，正則表達(dá)式：
/\s+/g，其中全局屬性g揪阶，可有可無昌抠；
- 遍歷元素集合，獲得每個(gè)元素的class名鲁僚，然后遍歷aryClass數(shù)組炊苫，利用正則判斷元素的class名中是否存在aryClass數(shù)組中所有項(xiàng)，只要有一項(xiàng)不存在冰沙，就阻斷數(shù)組遍歷侨艾，不合格；
- 如何判斷什么樣的元素可以插入到新建的空數(shù)組中拓挥，利用一個(gè)開關(guān)bOk唠梨，在元素集合遍歷時(shí)，給其賦值為true撞叽，當(dāng)數(shù)組遍歷校驗(yàn)中姻成，如果有一項(xiàng)不匹配，那么給bOk賦值為false愿棋，并添加break中斷for循環(huán)科展；待數(shù)組遍歷完成，判斷bOk的布爾值糠雨，如果為true才睹，代表所有數(shù)組遍歷中均匹配，滿足條件甘邀，將此元素插入到數(shù)組ary中琅攘，如果為false，則不插入松邪；
- 待元素集合遍歷完成后坞琴，返回ary;
- 知識(shí)點(diǎn)：
-
var aEle=parent.getElementsByTagName("*");代碼代表獲取parent父級(jí)元素下的所有元素集合；
-
strClass=strClass.replace(/(^ +)|( +$)/g,""),過濾傳入的實(shí)參strClass,將其前后空格刪除逗抑，其中正則表達(dá)式/(^ +)|( +$)/g,代表的含義是："開頭為一個(gè)或多個(gè)空格"或"結(jié)尾為一個(gè)或多個(gè)空格"剧辐，進(jìn)行全局查找替換；正則表達(dá)式可以寫成：/(^\s+)|(\s+$)/g;
-
var reg=new RegExp("\\b"+aryClass[j]+"\\b");正則創(chuàng)建為實(shí)例創(chuàng)建邮府，需要加引號(hào)荧关，需要轉(zhuǎn)義，可以進(jìn)行變量拼接褂傀；其中\b代表開頭忍啤，結(jié)尾，空格仙辟；而字面量創(chuàng)建同波，不需要加引號(hào)鳄梅，不需要轉(zhuǎn)義，不能進(jìn)行變量拼接未檩；
- bOk思想的運(yùn)用卫枝，解決for循環(huán)中的不滿足情況問題；
- 注意點(diǎn)：
- 添加的參數(shù)strClass字符串中讹挎，開頭結(jié)尾不能有空格校赤，不然會(huì)被split分割成空元素，添加到數(shù)組中筒溃，在驗(yàn)證時(shí)马篮，雖然結(jié)果不會(huì)影響，但是不利于代碼優(yōu)化怜奖，所以在傳入實(shí)參后浑测，必須對(duì)其進(jìn)行過濾，將開頭與結(jié)尾的空格去除掉歪玲；
<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不能有前后空格诈乒，所以要?jiǎng)h除烹棉，才能轉(zhuǎn)化為數(shù)組
var oWrap=document.getElementById("wrap");
function getByClass(strClass,parent) {
parent=parent || document;
//標(biāo)準(zhǔn)瀏覽器
if("getComputedStyle" in window){
//類數(shù)組轉(zhuǎn)數(shù)組
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中的字符串轉(zhuǎn)為數(shù)組，然后遍歷每一項(xiàng)钙皮，去比較aEle[i]中的class是否存在蜂科，有一項(xiàng)不存在就終止
var curEle=aEle[i];
var strEleClass=curEle.className;
for(var j=0; j<aryClass.length; j++){
var reg=new RegExp("\\b"+aryClass[j]+"\\b");//實(shí)例創(chuàng)建：需要加引號(hào)，需要轉(zhuǎn)義短条，可以變量拼接
if(!reg.test(strEleClass)){
bOk=false;
break;
}
}
if(bOk){
ary.push(curEle);
}
}
return ary;
}
console.log(getByClass(" div1 div2 div3 ",oWrap));
</script>
</body>
- hasClass方法
- 目的：判斷元素身上导匣，是否存在某一個(gè)指定的class名
- 參數(shù)：ele:元素； cName:指定class名茸时； 返回值：布爾值
- 注意點(diǎn)：
-
cName=cName.replace(/(^\s+)|(\s+$)/g,"");給傳入的實(shí)參字符串class過濾掉前后空格贡定；
-
var reg=new RegExp("\\b"+cName+"\\b");代碼中的正則表達(dá)式添加前后\\b的目的是為了防止元素的class名上會(huì)包含被檢測(cè)字符，必須加上前后\\b,其中\b代表：開頭可都、結(jié)尾缓待、空格，在實(shí)例創(chuàng)建中汹粤，需要轉(zhuǎn)義命斧；
-
var reg=new RegExp("(^|\\s+)"+cName+"(\\s+|$)")田晚，代碼為上述正則表達(dá)式的嚴(yán)格寫法嘱兼，其中\s代表空格，需要轉(zhuǎn)義贤徒，(^|\\s+)指的是開頭或多個(gè)空格芹壕；
- 例：如果cName為"div1",而元素身上的class名為"divdiv1 div2 div3",如果不添加
\\b汇四，那么驗(yàn)證就會(huì)成功，進(jìn)而出錯(cuò)踢涌；
<script>
function hasClass(ele, cName) {
cName=cName.replace(/(^\s+)|(\s+$)/g,"");
var reg=new RegExp("\\b"+cName+"\\b");//嚴(yán)格寫法：("(^|\\s+)"+cName+"(\\s+|$)"),實(shí)例創(chuàng)建中"\s"需要轉(zhuǎn)義通孽；
return reg.test(ele.className);
}
</script>
- addClass方法
- 目的：給元素身上添加一組class名，要先判斷元素身上是否已存在需添加class名
- 參數(shù)：ele：元素睁壁； strClass：待添加的class名 返回值：無背苦；
- 注意點(diǎn)：
-
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")開始對(duì)傳入的實(shí)參strClass進(jìn)行過濾
-
ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")，在拼接之前規(guī)范原有的字符串潘明；
-
ele.className+=" "+aryClass[i];字符串拼接時(shí)行剂，要拼接空格；
<script>
function addClass(ele,strClass) {
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");//把傳進(jìn)來的strClass進(jìn)行過濾钳降，刪除開頭結(jié)尾空格
var aryClass=strClass.split(/\s+/g);
for(var i=0; i<aryClass.length; i++){
if(!this.hasClass(ele,aryClass[i])){
//1 開頭結(jié)尾去掉空格 2 中間多個(gè)空格厚宰，變?yōu)橐粋€(gè)空格
ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")；//在拼接之前刪除原來字符串的開頭結(jié)尾空格遂填，將中間多個(gè)空格铲觉，變?yōu)橐粋€(gè)空格；
ele.className+=" "+aryClass[i];//拼接新的class名吓坚，前面拼接上一個(gè)空格撵幽；
}
}
}
</script>
- removeClass方法
- 目的：刪除元素身上的class名，要判斷元素身上是否已存在要?jiǎng)h除的class;
- 參數(shù)：ele:元素礁击； strClass：待刪除的class名 返回值：無并齐；
- 注意點(diǎn)：
-
strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")開始對(duì)傳入的實(shí)參strClass進(jìn)行過濾；
-
ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");客税，在驗(yàn)證要?jiǎng)h除的class名元素身上存在后况褪，利用replace進(jìn)行替換刪除，替換為空格更耻，然后再對(duì)替換完的字符串進(jìn)行規(guī)范：1）刪除開頭結(jié)尾空格测垛，2）將字符中間的多個(gè)空格，替換為一個(gè)空格秧均；
<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+")")//結(jié)果為："(div2 div4)"
</script>
</body>
