Generate HTML and Query elements with the H() and Q() functions

HTMLandQueryUtil.js

const example = (() => {
  const content = H("<div class=content>"+
    "<p>quia dolor sit, amet, consectetur, adipisci velit</p>"+
    "<p>sed quia non numquam eius modi tempora incidunt,</p>"+
    "<p>ut labore et dolore magnam aliquam quaerat voluptatem.</p>"+
  "</div>");
  const card = H("<section>"+
    "<header><h1>Dolorem Ipsum</h1></header>"+
    content.outerHTML,
  "</section>");
    
  const text = Q(".content", elm).innerText;
  const title = Q(".header", elm).innerText;

  const footer = H("<footer><small>"+
    `<code>${new Date().toLocaleDateString()}</code>`+
  "</small></footer>");

  card.appendChild(footer);
  return card;
})

// Parse an string into a DOM element tree
const H = (str, mime) => {
  let validMime = mime;
  if (!mime || !Object.values(H_MIME_TYPES).includes(mime)) {
    validMime = H_MIME_TYPES.HTML;
  }
  const parsedRoot = new DOMParser().parseFromString(str, validMime);
  try {
    return NoneOneAll(parsedRoot.body.children);
  } catch (e) {}
  return parsedRoot;
}

// Find elements from a given DOM tree, by default document.body
const Q = (query, rootElm = document.body) => NoneOneAll(
  (Array.isArray(rootElm)
    ? rootElm
    : [rootElm]
  ).map(
    relm => (!relm || typeof relm.querySelectorAll !== "function")
      ? null 
      : NoneOneAll( relm.querySelectorAll(query) )
  ).flat().filter(Boolean)
)


// Normalize a value into null, a single thing, or an actual array
// const NoneOneAll = (items) => (!items || items?.length < 1)
//   ? null
//   : (items.length == 1
//      ? items[0]
//      : Array.from(items)
//     )
// ;
// faster version:
const NoneOneAll = (children) => (
  (
    [
      () => null,
      children => children[0],
      children => Array.from(children)
    ][
      (
        (len) => ( +!!len ) + ( len > 1 )
      )(children?.length)
    ]
  )(children)
);

const H_MIME_TYPES = Object.freeze({
  HTML: "text/html",
  XML_OLD: "text/xml",
  XML: "application/xml",
  XHTML: "application/xhtml+xml",
  XML_SVG: "image/svg+xml",
});


// Example:
html_and_querty_example = () => {
  // will find the "font-sans" elements, direct children of "block", that are the 2nd of the children element
  const selectorStr = ".block > .font-sans:nth-child(2)";
  // will use this as the HTML DOM, render it, return the HTML Objects, and pass it to the Q.
  const htmlStr = `<div class="relative w-2xl"> 
<img src="https://is.gd/sMACTk" />
  <section class="h-32 w-32 bg-indigo block">
    <h1>title</h1>
    <code class="px-1 py-1 font-sans">H(); Q()</code>
  </section>
</div>
<div class="alert block">
  <i class="fa fa-warning" />
  <span> Lorem Ipsum! </span>
</div>
<div class="px-4 py-4 block">
  <p class="font-sans"> one </p> | <p class="font-sans"> two </p> | <p class="font-sans"> three </p>
</div>`;

  return Q(selectorStr, H(htmlStr));
  // should find two elements: <code> and the <p>two</p>
}