DOMUtils.js

const $ = (q, container = document) => [...container.querySelectorAll(q)];

$.createFragment = Range.prototype.createContextualFragment.bind(
  document.createRange()
);

$.attr = (el, attrs) => {
  for (let prop in attrs) {
    HTMLElement.prototype.hasOwnProperty(prop)
      ? (el[prop] = attrs[prop])
      : el.setAttribute(prop, attrs[prop]);
  }
};

$.on = (el, events) => {
  for (let name in events) el.addEventListener(name, events[name]);
};

$.off = (el, events) => {
  for (let name in events) el.removeEventListener(name, events[name]);
};