Как получить все вложенные элементы JS?

Question

[vjufvufcgyf]

допустим

<div>
	<div>
		<div>
		</div>
	</div>	
</div>

я хочу получить все три элемента, при этом знать уровень вложенности каждого

Comments

[reinmaker90]

Все тут, вообще гугл отличная штука!

[vjufvufcgyf]

reinmaker90, нет, гугл, пока что плохая штука, потому что Node.children выводит ТОЛЬКО дочерние элементы, а не все вложенные.

[reinmaker90]

vjufvufcgyf, , вот все вложенные в div.wr

[vjufvufcgyf]

reinmaker90, как ты это сделал?

[reinmaker90]

vjufvufcgyf, я вам написал метод, далее используйте циклы, если я не путаю то можно и наверное правильно рекурсивно получить все вложенные divы

Answer 1

[0xD34F]

Рекурсия есть:

const getElementsWithDepth = (el, depth = 0) =>
  [...el.children].reduce((acc, n) => (
    acc.push(...getElementsWithDepth(n, depth + 1)),
    acc
  ), [ { el, depth } ]);

Рекурсии нет:

function getElementsWithDepth(root) {
  const result = [];

  for (const stack = [ [ root, 0 ] ]; stack.length;) {
    const [ el, depth ] = stack.pop();
    result.push({ el, depth });
    stack.push(...Array.from(el.children, n => [ n, -~depth ]).reverse());
  }

  return result;
}

// или

const getElementsWithDepth = root =>
  Array.prototype.reduce.call(
    root.querySelectorAll('*'),
    (acc, n) => {
      acc.push({ el: n, depth: 1 });
      for (; (n = n.parentNode) !== root; acc[acc.length - 1].depth++) ;
      return acc;
    },
    [ { el: root, depth: 0 } ]
  );

Answer 2

[Воващ]

Node.childNodes возвращает коллекцию дочерних элементов данного элемента.