ラクラクDOM

README.md

ラクラクDOM

ユーザースクリプトなどであまりライブラリ使いたくない人へ

createElement

生DOMの要素作るマン

JSX pragma 風味

$, $$

生DOMの要素選択するマン

jQuery 風味

rakurakuDOM.ts

type Child = Node | string | number | boolean | undefined | null;

const createElement = <K extends keyof HTMLElementTagNameMap>(
  tagName: K,
  {
    style,
    ...attrs
  }: Partial<
    Omit<HTMLElementTagNameMap[K], "style"> & {
      style: Partial<HTMLElementTagNameMap[K]["style"]>;
    }
  > = {},
  ...children: Child[]
) => {
  const element = document.createElement(tagName);

  Object.assign(element, attrs);

  Object.assign(element.style, style);

  element.append(
    ...children
      .filter(
        (child): child is Exclude<Child, undefined | null | boolean> =>
          child == null || typeof child === "boolean",
      )
      .map((child) => (typeof child === "number" ? child.toString() : child)),
  );

  return element;
};

const $ = (sel: string, doc: HTMLElement | Document = document) =>
  doc.querySelector(sel);

const $$ = (sel: string, doc: HTMLElement | Document = document) =>
  doc.querySelectorAll(sel);