Есть ли способы получить элемент как функцию в чистом JavaScript?

Question

Я запутался, так как заметил, что эти 2 случая не дают того результата, который я ожидал;

console.log(typeof document.querySelector('.holder'));
console.log(typeof $('.holder'));

Браузер говорит, что эти 2 случая имеют одинаковые типы переменных, object. Но когда я пытаюсь добавить метод .each, он говорит, что document.querySelector('.holder') не является функцией.

    'use strict'
    const createMenuTable = (root, clips) => {
      return root.each(() => {
        console.log(root);
      })
    }
    let myTable = createMenuTable(
      document.querySelectorAll('.table'), 
      document.querySelector('.layerGroup')
    ); // When I change the `root` argument to the `$('.table')`, it runs w/o an error.

<div class="table">
  <div class="layerGroup">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Uncaught TypeError: root.each не является функцией

Моя цель - получить element как функцию, использующую обычный JavaScript, как в jQuery, но не знаю, как решить эту проблему.

Было бы понятно, что кто-то может объяснить мне, почему эти два случая не дают одинаковых результатов, даже если их тип переменных одинаков.

Answer 1

Метод querySelectorAll возвращает NodeList, который не имеет метода, подобного each, но вы можете использовать метод NodeList#forEach для этой цели.

return root.forEach((ele) => {
   console.log(ele);
})

---

В jQuery есть метод each(), который работает только с объектом jQuery, поэтому вы можете принять общее решение, обернув коллекцию jQuery.

return $(root).each((i, ele) => {
   console.log(ele);
})