遍历子节点的 DOM 子节点

Question

为什么一个元素的孩子的孩子不返回给我元素，而是给我未定义？

 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>

Answer 1

所以， 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>

Answer 2

document.querySelector('.collection')是一种返回 HTMLElement 对象的方法，该对象与包含“collection”CSS 类（ 文档）的任何元素匹配。

val = list.children是一个属性，将返回list节点的任何子节点的 HTMLCollection（有序集合，即列表）。
由于children属性返回一个列表，因此您可以通过使用集合上的item()方法或使用数组样式表示法来访问集合中的各个节点。 请参阅ParentNode.children (MDN) 。

最后; 使用val[3]调用时，请记住 JS 数组迭代从 0 开始。要获取 val 列表/数组中的第三项，您可以使用val[2] 。

Answer 3

.children是HTMLCollection ，它就像一个数组。 因此，它没有.children参数。

您需要遍历数组或选择一个项目：

val = list.children[0].children

或者

list.children.forEach(child => console.log(child.children))

Answer 4

从.children属性返回的 NodeList / HTML Collection 包含 parentElement 的直接后代（即 children -而不是 children 的 children ）。 如果你想使用.children去的“孙子”，你会通过两个需要遍历.children的集合，或者如果你心里有一个是childElement然后括号标记将是有效的（例如， parentElement.children[1] ）BTW括号表示法中的索引号是基于 0 索引的，例如.children[2]实际上是第三个元素，依此类推。

演示

 // Reference the <ul> const list = document.querySelector('.list'); /* Collect each <li> in <ul> into a NodeListr then convert it into a real Array with the bracket and spread operator (ie [...NodeList] */// itemsA and itemsB are identical const itemsA = [...list.querySelectorAll('.item')]; const itemsB = [...list.children]; /* Since the OP objective was vague...the following are console logs that verify the results. The last console log is my best guess as to what the OP's objective was. */ console.log(` .list direct descendants (aka children):\\n ${itemsB.map(item => ` <${item.tagName.toLowerCase()} class="${item.className}">...<\\/${item.tagName.toLowerCase()}>\\n`)}`); console.log(`Array itemsA (as htmlString):\\n ${itemsA.map(item => item.outerHTML)}`); console.log(`Array itemsB (as htmlString):\\n ${itemsB.map(item => item.outerHTML)}`); console.log(`Third .item of .list (as htmlString):\\n ${itemsA[2].outerHTML}`); console.log(`Third .item of .list deepest descendant:\\n ${[...itemsB[2].children].flatMap((node, index) => node.children[index].outerHTML)}`);

 .list { list-style: none } .item { margin-bottom: 14px } .as-console-wrapper { width: 375px; min-height: 100%; margin-left: 25%; } .as-console-row { border-bottom: 5px ridge #333 } .as-console-row-code::first-line { text-decoration: underline; } .as-console-row.as-console-row::after, .as-console-row-code.as-console-row-code::after { content:''; padding:0; margin:0; border:0; width:0; }

 <link href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" rel="stylesheet" crossorigin="anonymous"> <ul class="list"> <li class="item"> <a class="link" href="#/"> ITEM 1 <i class="fas fa-minus-square"></i> </a> </li> <li class="item"> <a class="link" href="#/"> ITEM 2 <i class="fas fa-minus-square"></i> </a> </li> <li class="item"> <a class="link" href="#/"> ITEM 3 <i class="fas fa-minus-square"></i> </a> </li> </ul>