Common basic DOM helpers

domHelpers.ts

export const remClasses = (
  { classList }: { classList: DOMTokenList },
  ...classes: string[]
) => classList.remove(...classes);

export const addClasses = (
  { classList }: { classList: DOMTokenList },
  ...classes: string[]
) => classList.add(...classes);

export const clear = ({ children }: { children: HTMLCollection }) =>
  Array.from(children).forEach((child) => child.remove());

export const sortChildren = (
  element: Element,
  comparator: (a: Element, b: Element) => number
) => {
  const { children } = element;
  const arr = Array.from(children);
  comparator ? arr.sort(comparator) : arr.sort();
  arr.forEach((child) => element.append(child));
};

export const $ = (selector: string, ctx = document) =>
  ctx.querySelector(selector);

export const $$ = (selector: string, ctx = document) =>
  ctx.querySelectorAll(selector);