☰

dom util

dom manipulation util

目前为 2024-07-03 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/499616/1404908/dom%20util.js 

  1. const HtmlSanitizer = {
  2.   tempElement: document.createElement("div"),
  3.   sanitize: function (/** @type {string} */ htmlString) {
  4.     this.tempElement.innerText = htmlString;
  5.     return this.tempElement.innerHTML;
  6.   },
  7. };
  8.  
  9. class HtmlString extends String {
  10.   /**@type {HTMLElement|null} */
  11.   element = null;
  12.  
  13.   /**@param {string} value */
  14.   constructor(value) {
  15.     super(value);
  16.   }
  17.  
  18.   /**@returns {HTMLElement} */
  19.   asElement() {
  20.     if (this.element !== null) {
  21.       return this.element;
  22.     }
  23.  
  24.     const temp = document.createElement("div");
  25.     temp.innerHTML = this.valueOf();
  26.     if (temp.childElementCount > 1) {
  27.       throw new Error("html template does not accept more than 1 element");
  28.     }
  29.  
  30.     this.element = /**@type {HTMLElement} */ (temp.firstElementChild);
  31.     return /**@type {HTMLElement} */ (this.element);
  32.   }
  33. }
  34.  
  35. /**
  36.  * @param {string} selector
  37.  * @param {HTMLElement|Document} rootElement
  38.  * @returns {HTMLElement|null}
  39.  */
  40. function $findElm(selector, rootElement = document) {
  41.   return /**@type {HTMLElement|null} */ (rootElement.querySelector(selector));
  42. }
  43.  
  44. /**
  45.  * @param {string} selector
  46.  * @param {HTMLElement|Document} rootElement
  47.  * @returns {HTMLElement}
  48.  */
  49. function $findElmStrictly(selector, rootElement = document) {
  50.   const element = /**@type {HTMLElement|null} */ (rootElement.querySelector(selector));
  51.   if (element === null) {
  52.     throw new Error(`Element with selector '${selector}' not found`);
  53.   }
  54.  
  55.   return element;
  56. }
  57.  
  58. /**
  59.  * @param {string} selector
  60.  * @returns {NodeListOf<HTMLElement>}
  61.  */
  62. function $findAll(selector) {
  63.   return /**@type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(selector));
  64. }
  65.  
  66. /**@typedef {string|HtmlString|number|boolean} NumOrStr */
  67.  
  68. /**
  69.  * safe html interpolation
  70.  * @param {TemplateStringsArray} literalValues
  71.  * @param {NumOrStr[]|NumOrStr[][]} interpolatedValues
  72.  * @returns {HtmlString}
  73.  */
  74. function html(literalValues, ...interpolatedValues) {
  75.   let result = "";
  76.  
  77.   interpolatedValues.forEach((currentInterpolatedVal, idx) => {
  78.     let literalVal = literalValues[idx];
  79.     let interpolatedVal = "";
  80.     if (Array.isArray(currentInterpolatedVal)) {
  81.       interpolatedVal = currentInterpolatedVal.join("\n");
  82.     } else if (typeof currentInterpolatedVal !== "boolean") {
  83.       interpolatedVal = currentInterpolatedVal.toString();
  84.     }
  85.  
  86.     const isSanitize = !literalVal.endsWith("$");
  87.     if (isSanitize) {
  88.       result += literalVal;
  89.       result += HtmlSanitizer.sanitize(interpolatedVal);
  90.     } else {
  91.       literalVal = literalVal.slice(0, -1);
  92.  
  93.       result += literalVal;
  94.       result += interpolatedVal;
  95.     }
  96.   });
  97.  
  98.   result += literalValues.slice(-1);
  99.   return new HtmlString(result);
  100. }