> Как реализовать функцию, принимающую селектор и возвращающую объект с методами для добавления классов и навешивания событий (JavaScript)

Вот пример реализации функции, которая принимает CSS-селектор и возвращает объект с методами для управления классами и событиями:

JAVASCRIPT
function createElementController(selector) {
  const element = document.querySelector(selector);
  
  if (!element) {
    throw new Error(`Элемент с селектором "${selector}" не найден`);
  }

  return {
    addClass(className) {
      element.classList.add(className);
      return this; // для цепочки вызовов
    },
    removeClass(className) {
      element.classList.remove(className);
      return this;
    },
    toggleClass(className) {
      element.classList.toggle(className);
      return this;
    },
    on(eventType, handler) {
      element.addEventListener(eventType, handler);
      return this;
    },
    off(eventType, handler) {
      element.removeEventListener(eventType, handler);
      return this;
    },
    getElement() {
      return element;
    }
  };
}

// Пример использования:
const controller = createElementController('.my-button');
controller
  .addClass('active')
  .on('click', () => console.log('Клик!'))
  .on('mouseenter', () => controller.addClass('hovered'));

Ключевые особенности:

• Функция находит элемент по селектору один раз при создании
• Возвращает объект с методами для работы с классами (addClass, removeClass, toggleClass) и событиями (on, off)
• Каждый метод возвращает this, что позволяет строить цепочки вызовов
• getElement() даёт доступ к самому DOM-элементу при необходимости
• Обработка ошибки, если элемент не найден