/**
 * @return {(HTMLDivElement|HTMLInputElement|HTMLFormElement|HTMLVideoElement|HTMLCanvasElement|HTMLImageElement)}
 */
function qs(selector, parent = null) {
  if (parent) {
    return parent.querySelector(selector);
  }
  return document.querySelector(selector);
}
/**
 * @return {Array<(HTMLDivElement|HTMLInputElement|HTMLFormElement|HTMLVideoElement|HTMLCanvasElement|HTMLImageElement)>}
 */
function qsa(selector, parent = null) {
  if (parent) {
    return parent.querySelectorAll(selector);
  }
  return document.querySelectorAll(selector);
}
/**
 *
 * @param {Number} n
 * @returns {String}
 */
Number.prototype.zero = function (n) {
  let str = "0".repeat(n) + this;
  return str.slice(-n);
};
/**
 *
 * @returns {String}
 */
Date.prototype.yyyymmddhyphen = function () {
  return this.getFullYear() + "-" + (this.getMonth() + 1).zero(2) + "-" + this.getDate().zero(2);
};
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLDivElement}
 */
function Div(parent, classname = "", text = "", style = {}) {
  let elm = document.createElement("div");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  elm.innerText = text;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLSpanElement}
 */
function Span(parent, classname = "", text = "", style = {}) {
  let elm = document.createElement("span");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  elm.innerText = text;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLCanvasElement}
 */
function Canvas(parent, classname = "") {
  let elm = document.createElement("canvas");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLAnchorElement}
 */
function A(parent, classname = "", href = "") {
  let elm = document.createElement("a");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  elm.href = href;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {HTMLButtonElement} setting
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLButtonElement}
 */
function Button(parent, classname = "", text = "", setting = {}, style = {}) {
  let elm = document.createElement("button");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  elm.innerText = text;
  Object.keys(setting).forEach((key) => {
    const value = setting[key];
    elm[key] = value;
  });
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLTableElement}
 */
function Table(parent, classname = "", style = {}) {
  let elm = document.createElement("table");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLTableRowElement}
 */
function Tr(parent, classname = "", style = {}) {
  let elm = document.createElement("tr");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLTableCellElement}
 */
function Td(parent, classname = "", text = "", style = {}) {
  let elm = document.createElement("td");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  elm.innerText = text;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLInputElement}
 */
function Input(parent, classname = "") {
  let elm = document.createElement("input");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLSelectElement}
 */
function Select(parent, classname = "", options = [], defaultoption = "") {
  let elm = document.createElement("select");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  options.forEach((option) => {
    elm.appendChild(new Option(option, option, option == defaultoption, option == defaultoption));
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLVideoElement}
 */
function Video(parent, classname = "") {
  let elm = document.createElement("video");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLTextAreaElement}
 */
function Textarea(parent, classname = "") {
  let elm = document.createElement("textarea");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.className = classname;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @returns {HTMLInputElement}
 */
function Inputdate(parent, classname = "") {
  let elm = document.createElement("input");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.type = "date";
  elm.className = classname;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {Date} date
 * @param {HTMLInputElement} setting
 * @returns {HTMLInputElement}
 */
function Inputdatetime(parent, classname = "", date, setting = {}) {
  let elm = document.createElement("input");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.type = "datetime-local";
  elm.className = classname;
  if (date) {
    let ms = date.getTime() + 9 * 60 * 60 * 1000;
    ms -= ms % 1000;
    elm.valueAsNumber = ms;
  }
  elm.step = 1;
  Object.keys(setting).forEach((key) => {
    const value = setting[key];
    elm[key] = value;
  });
  return elm;
}
function Space(parent, n = 1) {
  let elm = document.createElement("div");
  parent.appendChild(elm);
  elm.style.minWidth = n + "em";
  elm.style.minHeight = n + "em";
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {String} classname
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLImageElement}
 */
function Img(parent, src = "", classname = "", style = {}) {
  let elm = new Image();
  if (parent) {
    parent.appendChild(elm);
  }
  elm.src = src;
  elm.className = classname;
  Object.keys(style).forEach((key) => {
    const value = style[key];
    elm.style[key] = value;
  });
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLStyleElement}
 */
function Style(parent, text = "") {
  let elm = document.createElement("style");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.innerHTML = text;
  return elm;
}
/**
 *
 * @param {HTMLDivElement} parent
 * @param {CSSStyleDeclaration} style
 * @returns {HTMLLIElement}
 */
function Li(parent, text = "") {
  let elm = document.createElement("li");
  if (parent) {
    parent.appendChild(elm);
  }
  elm.innerHTML = text;
  return elm;
}