javascript - 遍历children的DOM children
问题描述
为什么一个元素的子元素的子元素不返回我的元素,而是给我未定义的?
let val;
const list = document.querySelector('.collection');
const listItems = document.querySelector('.collection-item');
val = list.children;
val = val[3].children.children;
console.log(val);
<ul class="collection">
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
解决方案
因此,在获得新孩子时,您必须附加children
回报:HTMLCollection
index
let val;
const list = document.querySelector('.collection');
const listItems = document.querySelector('.collection-item');
val = list.children;
val = val[2].children[0].children;
console.log(val);
<ul class="collection">
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<a class="secondary-content" href="#">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
推荐阅读
- python - Python 中的 unicode 声明和注释中的原始字符串
- php - 如何显示数据库中的默认值
- android - 意图拍摄多张照片
- c# - 如何在c#中添加检查条件
- node.js - 有没有办法让调试代码远离 React Native 的发布版本?
- python - 可调整大小的文本,在可调整大小的窗口中
- cookies - 如何使用令牌重定向到 Blazor
- powershell - 似乎无法像我希望的那样将 2 个数组合并到 csv 文件中
- java - OptaPlanner 在由 CartesianProductMoveSelector 创建的 CompositeMove 上引发 IllegalStateException
- html - Angular6 中 ArrayList 的可能返回类型?无效的返回类型会导致 .Subscribe 函数未定义吗?