document.getElementsByName在IE和Edge下无效的问题

MDN文档对于方法document.getElementsByName()的说明：

根据给定的 name 返回一个在 (X)HTML document的节点列表集合，也就是一个NodeLists类数组对象。

 

但在不同的浏览器中，此方法的作用方式有所不同：

1、 IE和Edge浏览器返回的是一个HTMLCollection元素集合

　　Chrome，FireFox，Opera等浏览器返回的是一个NodeLists节点列表。

2、在ie10及以上的版本中，getElementsByName除了获取上述ie10能获取的标签外，还能获取其他像div，p，span，ul...等的标签；在ie10以下的版本，getElementsByName只能获取部分标签的name，如a、input、form、embed、applet、map、object、img、textarea、select、button等，获取其他不支持name属性的标签则获取到id=name的标签，测试如下；

以下内容在ie8下测试

<div name="box_name">div标签1</div>
<div id="box_id">div标签2</div>

    console.log("div标签1",document.getElementsByName('box_name')[0])
    console.log("div标签2",document.getElementsByName('box_id')[0])

结果是使用getElementsByName(name)获取不支持name属性的div标签时，会返回id与传入的name值匹配的标签

 

3、Opera中， getElementsByName()  方法还会返回那些 id 为指定值的元素

 

兼容IE和edge的版本：

 1 function getElementsByName(tag, name){
 2     var els = document.getElementsByName(name);
 3     if(els.length > 0) return els;
 4     els = new Array();
 5     var tags = document.getElementsByTagName(tag);
 6     for(var i = 0; i < tags.length; i++){
 7         if(tags[i].getAttribute("name") == name){
 8             els[els.length] = tags[i];
 9         }
10     }
11     return els;