Пройдя через ДОМ детей детей - PullRequest
Новая
       8

Пройдя через ДОМ детей детей

0 голосов
/ 10 февраля 2020

почему потомки потомков элемента не возвращают мне элемент, а дают мне undefined? 

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>

Ответы [ 4 ]

1 голос
/ 10 февраля 2020

Итак, 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>
1 голос
/ 11 февраля 2020

document.querySelector('.collection') - это метод, который возвращает объект HTMLElement, соответствующий любым элементам, содержащим класс «collection» CSS ( документация ).

val = list.children является свойством и будет вернуть HTMLCollection (упорядоченную коллекцию, ie. a list ) всех дочерних элементов узла list.
Поскольку свойство children возвращает список, вы можете получить доступ к отдельные узлы в коллекции, используя либо метод item() в коллекции, либо используя нотацию в стиле массива. См. ParentNode.children (MDN) .

Наконец; при вызове val[3] помните, что итерации массива JS начинаются с 0. Чтобы получить третий элемент в списке / массиве val, вы должны использовать val[2].

0 голосов
/ 11 февраля 2020

Коллекция NodeList / HTML, возвращаемая из свойства .children, состоит из прямых потомков parentElement (ie children - not children of 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>
0 голосов
/ 10 февраля 2020

.children - это HTMLCollection, который работает как массив. Таким образом, он не имеет параметра .children.

Вам необходимо l oop через массив или выбрать элемент:

val = list.children[0].children

или

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

...