Javascript子节点不'；不能正确显示_Javascript_Undefined

Javascript子节点不'；不能正确显示

javascript

Javascript子节点不'；不能正确显示,javascript,undefined,Javascript,Undefined,我有以下代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ul{ list-style-type: none; } </style> </head> &l

我有以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <ul id="myTemplateId">
            <li>{name}</li>
            <li>{age}</li>
            <li>{name}</li>
            <li>{age}</li>
        </ul>
        <button onclick="generate()">Generate Html</button>
        <script type="text/javascript">
            function generate (people) {
                var list = document.querySelectorAll('#myTemplateId li');
                console.log(list[0].innerHTML);
                var index = 0;
                for(var li in list) {

                    console.log(li.innerHTML);
                }
            }
            function Person (name, age) {
                this.name = name;
                this.age = age;
            }
            var pesho = new Person('Pesho', 15);
            var gosho = new Person('Gosho', 27);
            var people = [pesho, gosho];
        </script>
    </body>
</html>


保险商实验室{
列表样式类型：无；
}

{name}
{age}
{name}
{age}

生成Html
功能生成（人）{
var list=document.querySelectorAll（“#myTemplateId li”）；
console.log（列表[0].innerHTML）；
var指数=0；
for（列表中的var li）{
log（li.innerHTML）；
}
}
职能人员（姓名、年龄）{
this.name=名称；
这个。年龄=年龄；
}
var pesho=新员工（'比索'，15）；
var gosho=新人（“gosho”，27）；
var people=[比索，戈索]；

第一根圆木很好。它记录li元素的innerHtml。但是，for in循环日志中的所有日志都未定义。有人知道为什么会发生这种情况吗？

for循环中的变量

li

是索引，而不是数组中的实际元素。这是正确的代码：

for(var index in list) {
    console.log(list[index].innerHTML);
}

但遍历列表的更好方法是：

Array.prototype.forEach.call(list, function(li, index) {
    console.log(li.innerHTML);
});

您不能直接在

list

变量上调用

forEach

，因为list是

NodeList

的一个实例，它没有

forEach

方法。

当使用

for（列表中的var li）

时，它会遍历列表中的所有属性。这意味着length和proto属性也是循环的，但是它们没有

innerHTML

，因此在这里返回undefined

我的建议是：

function generate(people) {
    var list = document.querySelectorAll('#myTemplateId li'),
        listLen = list.length;

    for (var i = 0; i < listLen; i++) {
        console.log(list[i].innerHTML);
    }
}

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var pesho = new Person('Pesho', 15);
var gosho = new Person('Gosho', 27);
var people = [pesho, gosho];

函数生成（人）{
var list=document.querySelectorAll（“#myTemplateId li”），
listLen=list.length；
对于（变量i=0；i

将

console.log（li.innerHTML）

更改为

console.log（li）

，看看您得到了什么…谢谢。这就解决了问题。虽然在所有li元素之后仍然有2个未定义。更新了我的答案。您可以看到，

list

的值是

[li，li，li，li，item:function]

。这是因为

list

不是数组，而是

NodeList

的实例。添加了一个如何遍历列表的示例。您可以在此处找到更多详细信息：