在页面加载时，错误，未定义getAll。我相信它是定义的吗？

Question

页面加载后，出现以下错误：Uncaught ReferenceError: getAll is not defined at HTMLDocument.<anonymous>

我正在尝试触发模式。当有人单击“观看视频”按钮时。 <div id="modal" class="modal">更改为<div id="modal" class="modal is-active">。

我的Javascript如下：

document.addEventListener('DOMContentLoaded', function () {
  // Modals

  var rootEl = document.documentElement;
  var $modals = getAll('.modal');
  var $modalButtons = getAll('.modal-button');
  var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');

  if ($modalButtons.length > 0) {
     $modalButtons.forEach(function ($el) {
        $el.addEventListener('click', function () {
          var target = $el.dataset.target;
          openModal(target);
        });
     });
  }

  if ($modalCloses.length > 0) {
     $modalCloses.forEach(function ($el) {
        $el.addEventListener('click', function () {
          closeModals();
        });
     });
  }

  function openModal(target) {
     var $target = document.getElementById(target);
     rootEl.classList.add('is-clipped');
     $target.classList.add('is-active');
  }

  function closeModals() {
     rootEl.classList.remove('is-clipped');
     $modals.forEach(function ($el) {
        $el.classList.remove('is-active');
     });
  }

  document.addEventListener('keydown', function (event) {
     var e = event || window.event;
     if (e.keyCode === 27) {
        closeModals();
        closeDropdowns();
     }
 });
});

我的getAll都链接到CSS类吗？因此，为什么我相信它们已被定义？

CodePen Example