因為ie8一下不兼容
document.getElementsByClassName()
功能:通過class的名字獲取符合條件的元素
node.getElementsByClassName()
指定node節點下,符合條件的元素。
所以我們自己封裝一個兼容IE8以下,獲取className節點的函數。
//兼容IE8以下,獲取className節點的元素。
function elementsByClassName(node, className){
var res = [];//定義一個數組用來存class相同的節點
//1、查找node所有的子節點
var nodes = node.getElementsByTagName("*");
/*node.getElementsByTagName("*") 的意思是通過標簽名查找所以node節點下所有的節點*為通配符*/
for(var i = 0; i < nodes.length; i++){//遍歷每一個節點
if(nodes[i].className == className){//判斷每一個節點的class屬性名是否等於 傳入的class名
res.push(nodes[i]);
}
}
然后進行調用即可
window.onload = function(){
var oUl = document.getElementById('ul1')
var node = elementByClassName(oUl, 'box');
alert(node.length);//2
}
html結構如下:
<body>
<ul id = 'ul1'>
<li class = 'box'>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li class = 'box'>11111111</li>
</ul>
<ol>
<li>22222222</li>
<li class = 'box'>22222222</li>
<li>22222222</li>
</ol>
</body>