HTMLCollection { length: 0 } 具有一个存在元素。儿童无法访问[0]

Question

我有问题。使用 HTMLCollection。

我正在编写菜单和多级子菜单。从 JSON 解析结构。

<ul class="categories">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

当我点击

menu 1

时，我的 JS 代码会在 JSON 数据的 li 元素内添加子菜单。看起来像：

<ul class="categories">
    <li>menu 1
    <ul>
        <li>submenu 11</li>
        <li>submenu 12</li>
        <li>submenu 13</li>
    </ul>
    </li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

当用户点击

menu 2

时，我的JS代码必须在第一个li元素中找到ul并从

menu 1

中删除ul 我正在尝试寻找

// Function for remove another submenu
function removeChildSubmenu(element) {
    //console.log(element)

    for (var item of element.children) {
        console.log(item.children)
    }
}

问题是：

item.children

是

HTMLCollection { length: 0 }

且存在元素。当我使用

item.children[0]

时，它会给出

undefined

。 在此输入图片描述

我如何解决问题或如何用另一种方式编写脚本（不要分享简单的方法。来自 JSON 的数据很大！）???

console.log(item.children)

如果您需要将子级作为数组而不是集合，那么可以像展平/映射集合一样简单。如果使用集合，您可能只需要使用 *.item(i) 而不是 {} 或 []:

document.body.children.item(i) === [...document.body.children][i];

Answer 1

如果您需要将子级作为数组而不是集合，那么可以像展平/映射集合一样简单。如果使用集合，您可能只需要使用 *.item(i) 而不是 {} 或 []:

document.body.children.item(i) === [...document.body.children][i];