getelementsbytagname 上的 Javascript 问题

Question

我在使用这段代码时遇到了一些问题:

var lista_input = document.getElementsByTagName("input");

console.log(lista_input);
console.log(lista_input[0]);

第一个日志正确地显示了我:

[item: function]
0: input
1: input
length: 2
__proto__: NodeList

但是第二个日志告诉我:

undefined

我不明白原因，它可以显示dom中输入的第一个元素!

Answer 1

问题的发生是由于 document.getElementsByTagName 的返回值是一个事件的 NodeList:

var l = document.getElementsByTagName('div');

console.log(l[0]); // undefined

var d = document.createElement('div');
document.body.appendChild(d);

console.log(l[0]); // div

将其与您在文档准备好之前调用代码(因此在列表中存在项目之前)以及控制台代码中的已知错误(可以在调用 后显示对象的状态)相结合console.log 已生成，并且您的行为与您所经历的完全相同。

重申一下:

var lista_input = document.getElementsByTagName("input");
// lista_input is a live NodeList with 0 elements

console.log(lista_input); // will print the lista_input object at a later point
console.log(lista_input[0]); // will print undefined at a later point

/* time passes, dom is loaded */
// lista_input now has the inputs you expect it to have

/* time passes */
// logs are now shown in Console

编辑:要获得良好的日志，您可以在记录对象时将其字符串化，将其转换为正确记录的原始值:

var lista_input = document.getElementsByTagName("input");

console.log(JSON.stringify(lista_input)); // {"length":0} - empty list
console.log(JSON.stringify(lista_input[0])); // undefined

PS:链接到解释控制台错误的博客文章: http://techblog.appnexus.com/2011/webkit-chrome-safari-console-log-bug/

链接到请求修复控制台错误的问题: How can I change the default behavior of console.log? (*Error console in safari, no add-on*)