getElementsByClassName 方法兼容性封装方法二
Posted 萧诺
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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); } }*/ // 第二种方式 // 在类名的两遍分别加空格,然后 参数类名 两端也加上空格 // 然后,在indexOf 来匹配 // c1 c2 c3 => 如果是判断c,也存在 // " c1 c2 c3 ".indexOf(" " + className + " ") // " c " if( (" " + cNodes.className + " ").indexOf(" " + className + " ") > -1) { results.push(cNodes); } } } return results; };
以上是关于getElementsByClassName 方法兼容性封装方法二的主要内容,如果未能解决你的问题,请参考以下文章
javascript getElementsByClassName方法
JavaScript getElementsByClassName方法
JavaScript getElementsByClassName方法