Создание цепочечных методов для работы с DOM‑элементами

Условие

Необходимо реализовать функцию $, которая будет возвращать объект, поддерживающий цепочку вызовов методов для манипуляций с выбранным элементом. Метод addClass должен добавлять указанный CSS‑класс, html — вставлять переданный HTML‑код внутрь элемента, toggleClass — переключать наличие класса, а css — принимать объект со стилями и применять их к элементу. Все методы должны возвращать тот же объект, чтобы их можно было вызывать последовательно.

import "./helpers";

function $(selector) {
  //code here
}

// пример использования
// const $node = $(".js-node");

// $node.addClass("bordered").html("<li>hello</li>").toggleClass("disabled").css({
//   color: "green",
//   padding: "10px"
// });

Ответ

Каждый метод должен изменять выбранный DOM-элемент и возвращать один и тот же объект-обёртку. Тогда вызовы можно соединить в цепочку.

function $(selector) {
  const node = document.querySelector(selector);
  if (!node) throw new Error('Элемент не найден');
  const api = {
    addClass(name) { node.classList.add(name); return api; },
    html(value) { node.innerHTML = value; return api; },
    toggleClass(name) { node.classList.toggle(name); return api; },
    css(styles) {
      for (const [name, value] of Object.entries(styles)) {
        if (name.startsWith('--') || name.includes('-')) node.style.setProperty(name, value);
        else node.style[name] = value;
      }
      return api;
    }
  };
  return api;
}

Метод html предназначен только для доверенной разметки. Для пользовательского текста используйте textContent либо проверенную очистку HTML.