在众多主流浏览器之间,老版本的IE依旧是个“神话”,前端开发者们无不为之撕心裂肺,高歌呐喊。老版本IE的兼容性问题,一直是开发者们较为头疼的问题。
比如通过类名来获取DOM节点,通常情况下,原生JS的写法是
var elements = document.getElementByClassName("className");
但是这种写法在IE9一下不支持,所以我们可以(必须)通过某种方式来解决这个问题
废话不多说,直接上代码
if (!document.getElementsByClassName) { //判断浏览器如果不支持getElementByClassName,就调用以下方法
document.getElementsByClassName = function (className) {
var elements = []; //创建一个数组用于保存最终的获取结果
var tags = document.body.getElementsByTagName('*'); //获取body下所有的标签
for (var i = 0; i < children.length; i++) { //通过for循环检测每个标签的类名属性className
var tagNames = tags[i].className;
var classNames = tagNames.split(' '); //classNames数组中保存的是tags[i]这个标签的类名组成部分
for (var j = 0; j < classNames.length; j++) { //接着遍历classNames数组
if (classNames[j] == className) { //检测classNames中是否有需要的类名部分
elements[elements.length] = tags[i]; //将获取classNames[j]这个部分类名所需要的标签存储到elements数组
break; //如果找到了需要的类名,后续的其他部分就不需要查看了
}
}
}
return elements; //返回新的数组
};
};
var elements = document.getElementByClassName("className"); //现在在主流浏览器中,getElementByClassName获取DOM元素都可以正常使用
如果浏览器不支持getElementByClassName的话,我们可以通过创建一个新的数组,筛选我们需要的className,步骤在代码中有详细的解释,把结果保存到新创建的数组中,供我们调用。算是间接的实现通过类名获取DOM元素。