Заполнение линейного массива DOM-узлами с помощью рекурсии в JavaScript

Question

Я пытаюсь создать функциональную рекурсивную функцию для рекурсивных запросов DOM в JavaScript, вот моя текущая попытка

//function to take a root DOM object and use a supplied query to return all the objects below that
function recurseTree(root, query, nodeList ) {
  //run an initial query
  let allNodes = root.querySelectorAll(query);
  if (!allNodes.length) {
    return [];
  }
  allNodes.forEach(function(node) {
      return Array.from(allNodes).concat(recurseTree(node, query, nodeList));
  });
}

Я настроил и вызываю функцию следующим образом:

var ulList = [];
//calling recursive function to populate the list with all children that fit query
ulList = recurseTree(nav_root, "a + ul", ulList);

Что меня так удивляет, так это то, что, хотя введенный массив (ulList) никогда не отклоняется от пустого массива, при переходе в отладчик он фактически устанавливает ulList в неопределенное значение впоследствии, так как впоследствии я пытаюсь распечатать его на консоли.

Answer 1

Сначала функция querySelectorAll уже находит в дереве элемент, соответствующий селектору. Так что ваша рекурсивная функция не имеет смысла.

Если вы хотите получить плоский массив NodeList, вы можете сделать: (но вы уже знаете)

Старая школа

Array.prototype.slice.call(root.querySelectorAll(query))

Поддерживаемый способ

Array.from(root.querySelectorAll(query))

ES6

[...root.querySelectorAll(query)]