如何在纯Javascript中检查子节点在祖先节点中的位置？

假设我有一个HTML列表，由于某些JS，它会根据用户的交互动态变化，这也会改变JS中反映后端数据的相关列表：一个数组

listItems

，其中每个

listItem

都有实例变量

itemColor

，

itemSize

，和数组

extraInfo

<div id="items-list">
    <div id="item-1" class="item">...</div>
    <div id="item-2" class="item">...</div>
    <div id="item-3" class="item">
        <div class="item-color">blue</div>
        <div class="item-size">big</div>
        <div class="extra-item-info-list">...</div>
</div>

...
...
蓝色
大的
...

基于JS的每个项目都会有元素

和

。我希望用户能够点击一个项目的属性并与之交互，这样我就可以反映JS数据中的变化。目前，我正在将事件侦听器放置在嵌套的

div

上，以检测对事件的单击，但是如何检查与哪个

项进行了交互，以便我可以更改JS中的相关
列表项
？知道与特定的内部元素进行了交互，如何查看
项目列表
中的哪个
项目
？我只有一个非常糟糕的主意：

检查父项父项的子项并查找父项相对于元素的索引：单击第三个项目的
项目颜色
将查找索引2，因为
项目-3
是
项目列表
的第二个索引。然后我可以找到数组的第二个索引
listItems
，并在那里修改数据。但是，如果
div
结构发生变化，作为一个通用函数，这将失败，因此我希望有一个更通用的解决方案，并且是纯的、普通的JS:no JQuery。
循环可以很好地满足您的需要。。。下面是一个如何循环类选择器
.item
并检查每个列表中的子项的示例。如果有子元素，则获取该元素ID的内容并使用for循环进行迭代，将变量设置为increment，这将允许您使用列表中元素的键获取子元素的值。由于
.item
元素具有id，因此您可以使用该id来迭代


const items=document.querySelectorAll（'.item'））
常量getElements=（el）=>{
el.forEach（（项目，关键）=>{
//检查item元素中是否存在具有的子级
if（item.children[0]！==未定义）{
//获取子项的当前迭代的id
让elId=document.getElementById（item.id）；
log（`Element ID:${elId.ID}->具有以下子级：`）；
//让我们使用子项数量的长度来增加一个键
//并获取当前项目的childrens值，不管它们是什么
for（设i=0；i${elId.children[i].textContent}`）
}
}
})
}
获取要素（项目）

...
...
红色
小的
...
...
蓝色
大的
...
...
绿色
中等的
顶部
您可以在数组元素中放置对DOM元素的引用。然后您可以在数组中搜索DOM元素。您可以使用方法
contains
询问on元素是否在另一个元素中
elementA.contains（elementB）//true或false
这是否需要在DOM中的
项列表
子项之间循环？我也在想，但我想知道是否有一种更有效的方法。@protommxx有时循环是一种方法。不要预先优化，而是在性能真正成为问题时进行优化。