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

Why is child html object undefined/null

本文关键字：未定义 对象 html 为什么      更新时间：2023-09-26

我不知道为什么子对象在此代码中返回未定义。

代码所做的是创建一个 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.children[i]<变得未定义，然后找不到对象的标签或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]时，它变得未定义

你的问题是i不是你认为的在你的onclick处理程序中的样子。 i属于全局范围。当分配点击处理程序的 for 循环完成后，i的值将等于 elementstart.children.length(我们知道这一点是因为 for 循环循环直到 i 等于 elementstart.children.length (。调用onclick处理程序时，childrenOfElement[i]等效于childrenOfElement[elementstart.children.length] - 当然，undefined .

你需要做的是为 for 循环的每次迭代创建一个新作用域(在 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));

(domElement(.children 是一个返回子数组的 javascript 属性

var childrenOfElement = element.children
相关文章：