因為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>