解决getElementsByClassName兼容性问题
2016-07-30 17:58
501 查看
在IE8及IE8以下浏览器中不支持getElementsByClassName,需要自己重新修改一下,如下:
第一种方法:javascript DOM书中提供的简单替换方案(不是很严谨,但是很容易看明白)
第二种方法:模仿jQuery中的兼容性(ps:自学传智播客视频中老师的讲解)
说明: 由于每次调用getElementsByClassName时进行能力检测,效率非常低,所以需要在浏览器加载js开始时,就进行能力判断,在全局作用域提供一个support方法,里面提供所有的与方法名相同的属性,值均为boolean,之后用到能力检测的地方直接调用support即可。
代码示范:
本人为前端新手,很多文章是作为自学过程中记下的笔记,错误的地方希望大家能指出,谢谢
第一种方法:javascript DOM书中提供的简单替换方案(不是很严谨,但是很容易看明白)
function getElementsByClassName(node,classname){ if(node.getElementsByClassName){ // 使用现有方法 return node.getElementsByClassName(classname); } else{ var results = new Array(); // 获取改元素下的所有元素 var elems = node.getElementsByTagName("*"); for(var i=0; i<elems.length; i++){ // 判断每个元素的className是否包含指定的classname if (elems[i].className.indexOf(chassname) != -1) { results[results.length] = elems[i]; } } return results; } } var p = document.getElementsByTagName("p") var sales = getElementsByClassName(p,"sales");
第二种方法:模仿jQuery中的兼容性(ps:自学传智播客视频中老师的讲解)
说明: 由于每次调用getElementsByClassName时进行能力检测,效率非常低,所以需要在浏览器加载js开始时,就进行能力判断,在全局作用域提供一个support方法,里面提供所有的与方法名相同的属性,值均为boolean,之后用到能力检测的地方直接调用support即可。
代码示范:
// byClassName的能力检测部分 var support = {}; // 第一种方法 // support.getElementsByClassName = !!document.getElementsByClassName; // 第二种方法 加强的检测 support.getElementsByClassName = (function(){ // 赋值为isExist的boolean值 var isExist = !!document.getElementsByClassName; // 判断getElementsByClassName是否为方法(防止代码注入) if(isExist && typeof document.getElementsByClassName == 'function'){ // 创建div var div = document.createElement('div'), divWithClass = document.createElement('div'); // 赋值一个class为c divWithClass.className = 'c'; // 将divWithClass追加到div中 div.appendChild(divWithClass); // 返回获取的className c 是否为divWithClass return div.getElementsByClassName('c')[0] === divWithClass; } return false; })(); // 定义getClass选择器 var getClass = function (className, results) { // 判断results是否存在,不存在则赋值为数组 results = results || []; // 判断是否支持getElementsByClassName if(support.getElementsByClassName){ // 如果支持则使用默认的 results.push.apply(results,document.getElementsByClassName(className)); } else { // 自定义实现 // 循环,判断是否符合要求 说明:each循环与getTag方法也为封装的方法,在之后js框架封装的文章中 each(getTag('*'), function (i, v) { // 判断该元素是否有该className if((' ' + v.className + ' ').indexOf(' ' + className + ' ') != -1){ results.push(v); } }); } return results; }
本人为前端新手,很多文章是作为自学过程中记下的笔记,错误的地方希望大家能指出,谢谢
相关文章推荐
- 大丰收呀
- runTime运用的场景
- 关于web-root和web-inf的用处
- 用alibba的jar包返回json格式化
- 细说select、poll和epoll之间的区别与优缺点
- swig(Lua)对STL/C++ library的支持
- 关于GLSurfaceView 渲染的那些事
- 静态内存分配-链表管理(2)实现
- java面向对象
- 静态链表
- 从源码出发了解RxJava的使用(中)
- I/O多路转接之select、poll、epoll
- Linux 基础知识
- Ajax使用学习
- Spring Bean初始化过程
- TensorFlow学习笔记(一):快速安装与使用TensorFlow
- HDU-1228 - A + B (很久没做水题了!都快忘了......)
- java生成PDF文件
- 开源学习网站学习
- 工厂模式