dom_utils.ts

function qs(selector: string, parent: ParentNode = document): Element | null {
    return parent.querySelector(selector)
}

function qsa(selector: string, parent: ParentNode = document): Element[] {
    return [...parent.querySelectorAll(selector)]
}

function createElement(type: string, options: Record<string, string | object> & Partial<{ class: string, dataset: object, text: string }> = {}): HTMLElement {
    const elm = document.createElement(type)

    if (options.class) {
        elm.classList.add(...options.class.split(' '))
        delete options.class
    }

    if (options.text) {
        elm.textContent = options.text
        delete options.text
    }

    if (options.dataset) {
        Object.entries(options.dataset).forEach(([key, value]) => elm.dataset[key] = value)
        delete options.dataset
    }

    Object.entries(options).forEach(([key, value]) => elm.setAttribute(key, value as string))

    return elm
}