兼容IE8以下,獲取className節點的元素(document.getElementsByClassName()兼容寫法)。


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM