Question

我无法弄清楚为什么子对象在此代码中返回undefined。

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

一个例子

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

列表将首先选择setone，它将成为当前对象，您将看到子对象的设置，然后设置两个然后单击它们然后它们将成为当前对象，除非您单击子对象 onclick＆gt; elementstart.children [i] ＆lt;变为未定义，然后找不到对象的标记或id，以便列表中断。

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

（domElement）.children是一个返回子项数组的javascript属性

var childrenOfElement = element.children

Answer 2

您的问题是i不是您认为的onclick处理程序中的内容。 i属于全球范围。分配了点击处理程序的for循环完成后，i的值将等于elementstart.children.length（我们知道这是因为for循环 { i等于elementstart.children.length）。调用onclick处理程序后，childrenOfElement[i]相当于childrenOfElement[elementstart.children.length] - 当然是undefined。

您需要做的是为for循环的每次迭代创建一个新范围（在JavaScript中是一个新函数）。此范围将创建一个新变量，该变量将包含该迭代中的值。然后，您将使用此新变量作为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));

为什么child html对象是undefined / null

2 个答案: