javascript中document.getElementsByClassName兼容性封裝方法一


var getElmsByClsName = function(className, results) {
            results = results || [];
            // 判斷瀏覽器是否支持 getElementsByClassName
            if(document.getElementsByClassName) {
                // 瀏覽器支持這個方法
                results.push.apply( results, 
                    document.getElementsByClassName(className) );
            } else {
                // 瀏覽器不支持
                // 實現:通過類名來獲取頁面中的元素
                // 思路:
                // 1 通過標簽名獲取到所有的元素
                // 2 循環遍歷獲取到的所有元素,分別判斷當前元素有沒有指定的類

                // 1 獲取到頁面中所有的元素
                var nodes = document.getElementsByTagName("*");
                // 2 遍歷
                for(var i = 0; i < nodes.length; i++) {
                    var cNodes = nodes[i];
                    // 2.1 判斷當前元素是否包含 指定的類 className
                    // 第一種方式:
                    // 1 獲取到當前元素的類名 className/getAttribute("class")
                    // 2 將獲取到的類名 以空格分割 產生一個數組
                    //         ["c1", "c2", "c3"]
                    // 3 用數組中的每一個元素分別跟className比較
                    // 4 如果是符合要求的就放到 results 中
              var cNodeClsName = cNodes.className;
                    var clsNames = cNodeClsName.split(" ");
                    for(var j = 0; j < clsNames.length; j++) {
                        if(clsNames[j] === className) {
                            results.push(cNodes);
                        }
                    }

                }
            }
            
            return results;
        };

 

 


免責聲明!

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



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