Как реализовать мини-$ с цепочкой методов DOM?

Условие

Реализуйте браузерную функцию $(selector), которая выбирает элементы и поддерживает addClass, removeClass, toggleClass, css(name,value), html(trustedHtml). Все методы работают на всей выборке и возвращают ту же обёртку. Имена CSS-свойств — kebab-case, HTML в учебном примере доверенный. Пример: $('.item').addClass('on').css('color','red').html('OK').

Ответ

Сохраните статическую выборку в замыкании и возвращайте объект api из каждого метода. Это обеспечивает chaining и одинаковое применение операций ко всем найденным элементам.

function $(selector) {
  const nodes = [...document.querySelectorAll(selector)];
  const each = fn => { nodes.forEach(fn); return api; };
  const api = {
    addClass: c => each(n => n.classList.add(c)),
    removeClass: c => each(n => n.classList.remove(c)),
    toggleClass: c => each(n => n.classList.toggle(c)),
    css: (k, v) => each(n => n.style.setProperty(k, v)),
    html: value => each(n => { n.innerHTML = value; })
  };
  return api;
}

Пустая выборка остаётся корректной цепочкой. html нельзя использовать для недоверенного пользовательского ввода без проверенной sanitization; для обычного текста нужен textContent. Это минимальная учебная обёртка, не полная совместимость с jQuery.