为什么子html对象未定义/为空

Question

我不明白为什么子对象在这段代码中返回未定义。

代码的作用是创建一个 html 对象树，它找到子对象和该元素的父对象，它找到元素子对象，然后将它们添加到列表中，然后您可以（或意味着能够）单击在该列表上选择您想要的子对象，然后使用您选择的子对象作为新的当前对象重新生成树。

举个例子

<div id="setone">
     <div id="setwo-one">
         <div id="setthree">
         </div>
     </div>
     <div id="settwo-two">
     </div>
</div>

列表将首先选择 setone，它成为当前对象，您将看到子对象 settwo-one 和 settwo-two，然后单击它们，然后它们成为当前对象，除非您单击子对象时 onclick > elementstart。孩子们[我]< becomes undefined and then can't find the tag or id of the object so the list breaks.

function treedialogupdate(elementstart)
{
if(elementstart != null)
{
    var treelog = document.getElementById("treedialog");

    var listset = treelog.getElementsByTagName("UL")[0];
    listset.innerHTML = "";
    var beforeitem = treelog.getElementsByClassName("before")[0];
    var startitem = treelog.getElementsByClassName("start")[0];

    startitem.innerHTML =  "Current Object: " + elementstart.tagName + " " + elementstart.id;

    for(i = 0; i < elementstart.children.length; i++)
    {
        if(elementstart.children[i].tagName)
        {
            listset.innerHTML += "<li>" + elementstart.children[i].tagName + " " + elementstart.children[i].id + "</li>";

        }   
    }
    for(i = 0; i < childObjectList.length; i++)
    {
        listset.children[i].onclick =function(){ 
        treedialogupdate(elementstart.children[i]); };
    }

    if(elementstart.parentNode != null || elementstart.parentNode == "undefined")
    {
        beforeitem.innerHTML = "Parent Object: " +  elementstart.parentNode.tagName + " " elementstart.parentNode.id;
        beforeitem.onclick =function(){ treedialogupdate(elementstart.parentNode); };
    }
    else
    {
        beforeitem.innerHTML = "";
        beforeitem.onclick = "";
    }
}
}

（下面的重要部分） 我这样设置点击时

 for(i = 0; i < elementstart.children.length; i++)
    {
        listset.children[i].onclick =function(){ 
            childrenOfElement = elementstart.children;
            console.log(childrenOfElement);
            console.log(childrenOfElement[i]);
            treedialogupdate(childrenOfElement[i]); 

        };
    }

这就是我在控制台中得到的内容

[section#header, section.fullwidth, section#footer, header: section#header, footer:      section#footer, item: function, namedItem: function]
page-functions.js:278 undefined

您所看到的是 elementstart.children 有子元素，但是当我使用特定元素（即childrenOfElement[i]）时，它变得未定义

Answer 1

您的问题是

i

不是您认为的

onclick

处理程序内部的内容。

i

属于全局范围。当分配点击处理程序的 for 循环完成时，

i

的值将等于

elementstart.children.length

（我们知道这一点是因为 for 循环循环 until

i

等于

elementstart.children.length

）。当您的

onclick

处理程序被调用时，

childrenOfElement[i]

相当于

childrenOfElement[elementstart.children.length]

- 当然，

undefined

。

您需要做的是为 for 循环的 each 迭代创建一个新作用域（在 JavaScript 中是一个新函数）。此作用域将创建一个新变量，其中包含 i 在该迭代中的值。然后，您将使用这个新变量作为

childrenOfElement

数组的索引。

实现此目的的一个性感方法是使用立即调用的函数表达式（http://benalman.com/news/2010/11/immediately-invoked-function-expression/）：

listset.children[i].onclick = (function(index) {
    return function () {
        childrenOfElement = elementstart.children;
        treedialogupdate(childrenOfElement[index]); 
    };
}(i));

Answer 2

(domElement).children 是一个 javascript 属性，返回子元素数组

var childrenOfElement = element.children

Answer 3

只需将

for(i=

更改为

for(let i=