javascript獲取類元素 - xiaominwu－IT工程師數位筆記本

文章出處

代碼測試是ie5+；

原生javascript中篩選出含有指定類的元素；

思想：在指定范圍里把所有的元素篩選出來，然后把里面的每個元素都遍歷找出它們含有的所有類，然后逐個元素遍歷它們各自的類，如果指定的類和它們里面的類相等，那么就把這個元素放進一個數組中然后返回這個數組。

<span style="font-size:18px;"><!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getClassName(classname,idbox){   /*創建一個函數，可以傳入兩個參數，指定選擇的類，指定選擇類的范圍*/
var box=document.getElementById(idbox);  //獲取ID為第二個參數的元素
var cbox=box || document;  //檢測box是否存在（否有傳入第二個參數），如果不存在則把document賦予變量cbox（確定指定類的父容器即類的范圍）如果有則在指定的容器中尋找類，如果沒有則在整個文檔中尋找。
var cbox_elem=cbox.getElementsByTagName('*'); //獲取指定容器或頁面中所有元素
var ctag=new Array(); /*創建一個空數組用來后面放置含有指定類的元素*/
for(var i=0;i<cbox_elem.length;i++){   /*遍歷容器中的所有元素*/
var cur_else=cbox_elem[i];  /*把當前遍歷的元素賦值給變量cur_else*/
var classnames=cur_else.className.split(' ');
/*把當前遍歷的元素中的所有類用空格分開成一個數組并賦值給變量classnames*/
for(var j=0;j<classnames.length;j++){  /*遍歷當前元素中里的每個類*/
if(classnames[j]==classname){  /*當前遍歷中的類和第一個參數是否相等*/
ctag.push(cur_else); /*相等則把擁有該類的元素添加到先前創建好的數組中*/
break; /*退出這個類循環直接跳到外層元素for語句*/
}
}
}
return  ctag; /*把數組返回給調用的代碼，這里把數組返回給變量all_li*/
}
window.onload=function(){
var all_li=getClassName("pp","y");
alert(all_li.length)
}
</script>
</head>
<body>
<!-- 兼容IE5+ -->
<ul id="y">
<li class="pp uu"></li>
<li class="pp"></li>
<li class="pp"></li>
<li ></li>
<li ></li>
</ul>
</body>
</html></span>

知識點學習

JavaScript中的obj.split(a,b) 方法

用于把一個字符串分割成字符串數組。

該方法有兩個參數：

a:必需。字符串或者正則表達，用來指定分割的地方。

b:可選。指定返回數組的最大長度，返回指定個數的數組。