Question

IE中的js如果用getElementsByName去获取一个动态创建的input为啥总是弹窗undefined?

<script type="text/javascript" >
window.onload= function (){
var input=document.createElement('input');
input.type='text';input.name='dir';
var h1=document.getElementsByTagName('h1')[0];
h1.parentNode.appendChild(input);
test();
}
function test(){
var input=document.getElementsByName('dir')[0];
alert(input);
}
</script>
第一请问为什么？第二请问如何实现兼容？

Answer 1

检查一下代码中input对象是否有name属性。
此方法与getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个表单中的name属性通常不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

Answer 2

如果您用的是低版本的IE,动态创建的input是不能设置name值的....您可以采用document.createElement('<input type="text" name="dir">');这样的形式去创建,当然了.....如果不是低版本IE,完全不建议用这样的方法来创建元素...

Answer 3

原因可参考：http://blog.csdn.net/babydavic/article/details/1882361

修改代码：

<script type="text/javascript" >
window.onload= function (){
    var input=document.createElement('input');
    input.type='text';input.name='dir';input.id='dir';
    var h1=document.getElementsByTagName('h1')[0];
    h1.parentNode.appendChild(input);
    test();
}
function test(){
    var input=document.getElementsByName('dir')[0];
    alert(input);
}

Answer 4

如果那个元素没有[Name]属性或者是空白自然就会返回这个信息。