项目需要,笔者在给div使用document.getElementsByName时发现在IE上是无法正常获取的,而在Chrome FF是正常的。
又是这种头疼的问题,万恶的IE。
例:
Page Name
window.onload = initAll;
function initAll() {
alert(document.getElementsByName('sex').length);
}
在FF和Chrome中都会正常弹出2 而在IE下为0
所以为了需求 自己写了个函数来替代 如下
window.onload = initAll;
function initAll() {
window.getElementsByName = function(tag, name){
// ----用于非IE浏览器-----
var eles = document.getElementsByName(name);
if(eles.length > 0) return eles;
// ----用于IE----
var eles = new Array();
var e = document.getElementsByTagName(tag);
for(var i = 0; i < e.length; i++){
if(e[i].getAttribute("name") == name){
eles[eles.length] = e[i];
}
}
return eles;
}
alert(getElementsByName('div', 'sex').length);
}
我们来简单分析下 (其实也真得很简单)
首先 定义一个新 方法 getElementsByName 放到 window对象中 这样全局都可以使用 就不仅限于在当前函数中使用 (当然,你也可以在全局内声明新方法)
函数接收2个参数
tag
即 标签名 其实在这里可以直接省略 在函数内 var tag = 'div' 即可 因为这仅仅是在IE下的div标签不可用而已 (- -其他未知 读者可以自行尝试)
name
即 name属性名 即你原本想要找的 ByName值
前2句就为了不让那些非IE麻烦 可以用getElementsByName 的就让它用吧
IE的:
var eles = new Array();
定义一个变量来保存结果 因为我们知道 getElementsByName 得到的就是一个数组对象
然后:
var e = document.getElementsByTagName(tag);
再通过 getElementsByTagName 来得到页面内的tag (即div) 集合
最后:
for(var i = 0; i < e.length; i++){
if(e[i].getAttribute("name") == name){
eles[eles.length] = e[i];
}
}
将通过 getElementsByTagName 得到的集合进行遍历
for(var i = 0; i < e.length; i++)
如果某个元素的 name 属性是 正是形参中的name值的话 就将它保存到我们的结果变量 eles中
if(e[i].getAttribute("name") == name){
eles[eles.length] = e[i];
}
最后 return啦 就这么简单
参考文档: