遍历 children 的 DOM 个 children

Question

为什么一个元素的子元素的子元素没有 return 给我元素，而是给我未定义的元素？

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，其工作方式类似于数组。因此，它没有 .children 参数。

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

val = list.children[0].children

或

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

Answer 2

所以，children return HTMLCollection 然后你必须在获取新的时附加 index children:

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 3

document.querySelector('.collection') 是一种方法，它 return 是一个 HTMLElement object 匹配包含 "collection" CSS class (documentation).

val = list.children 是一个属性并且将 return 任何 [= list 节点的 32=]。
由于 children 属性 return 是一个列表，您可以通过对集合使用 item() 方法或使用 array-style 符号。参见 ParentNode.children (MDN)。

最后；对于 val[3] 调用，请记住 JS 数组迭代从 0 开始。要获取 val list/array 中的第三项，您需要使用 val[2].

Answer 4

从 .children 属性返回的一个 NodeList / HTML 集合包含 parentElement 直接后代（即子元素——不是子元素儿童）。如果您想使用 .children 获取 "grandchildren"，则需要遍历两个 .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>

遍历 children 的 DOM 个 children

Traversing the DOM children of children

javascript

dom

traversal

children

演示