☰

DOMUtils

使用js重新对jQuery的部分函数进行了仿写

当前为 2024-05-29 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/465772/1384985/DOMUtils.js 

  1. (function (global, factory) {
  2.     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3.     typeof define === 'function' && define.amd ? define(factory) :
  4.     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
  5. })(this, (function () { 'use strict';
  6.  
  7.     const DOMUtilsCoreDefaultEnv = {
  8.         document: document,
  9.         window: window,
  10.         globalThis: globalThis,
  11.         self: self,
  12.     };
  13.     const DOMUtilsCoreEnv = {
  14.         document: document,
  15.         window: window,
  16.         globalThis: globalThis,
  17.         self: self,
  18.     };
  19.     const DOMUtilsCore = {
  20.         init(option) {
  21.             if (!option) {
  22.                 option = Object.assign({}, DOMUtilsCoreDefaultEnv);
  23.             }
  24.             Object.assign(DOMUtilsCoreEnv, option);
  25.         },
  26.         get document() {
  27.             return DOMUtilsCoreEnv.document;
  28.         },
  29.         get window() {
  30.             return DOMUtilsCoreEnv.window;
  31.         },
  32.         get globalThis() {
  33.             return DOMUtilsCoreEnv.globalThis;
  34.         },
  35.         get self() {
  36.             return DOMUtilsCoreEnv.self;
  37.         },
  38.     };
  39.  
  40.     /** 通用工具类 */
  41.     const DOMUtilsCommonUtils = {
  42.         /**
  43.          * 判断元素是否已显示或已连接
  44.          * @param element
  45.          */
  46.         isShow(element) {
  47.             return Boolean(element.getClientRects().length);
  48.         },
  49.         /**
  50.          * 用于显示元素并获取它的高度宽度等其它属性
  51.          * @param element
  52.          */
  53.         showElement(element) {
  54.             let dupNode = element.cloneNode(true);
  55.             dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
  56.             DOMUtilsCore.document.documentElement.appendChild(dupNode);
  57.             return {
  58.                 /**
  59.                  * 恢复修改的style
  60.                  */
  61.                 recovery() {
  62.                     dupNode.remove();
  63.                 },
  64.             };
  65.         },
  66.         /**
  67.          * 获取元素上的Float格式的属性px
  68.          * @param element
  69.          * @param styleName style名
  70.          */
  71.         getStyleValue(element, styleName) {
  72.             let view = null;
  73.             let styles = null;
  74.             if (element instanceof CSSStyleDeclaration) {
  75.                 /* 直接就获取了style属性 */
  76.                 styles = element;
  77.             }
  78.             else {
  79.                 view = element.ownerDocument.defaultView;
  80.                 if (!view || !view.opener) {
  81.                     view = window;
  82.                 }
  83.                 styles = view.getComputedStyle(element);
  84.             }
  85.             let value = parseFloat(styles[styleName]);
  86.             if (isNaN(value)) {
  87.                 return 0;
  88.             }
  89.             else {
  90.                 return value;
  91.             }
  92.         },
  93.         /**
  94.          * 判断是否是window，例如window、self、globalThis
  95.          * @param target
  96.          */
  97.         isWin(target) {
  98.             if (typeof target !== "object") {
  99.                 return false;
  100.             }
  101.             if (target instanceof Node) {
  102.                 return false;
  103.             }
  104.             if (target === globalThis) {
  105.                 return true;
  106.             }
  107.             if (target === window) {
  108.                 return true;
  109.             }
  110.             if (target === self) {
  111.                 return true;
  112.             }
  113.             if (target === DOMUtilsCore.globalThis) {
  114.                 return true;
  115.             }
  116.             if (target === DOMUtilsCore.window) {
  117.                 return true;
  118.             }
  119.             if (target === DOMUtilsCore.self) {
  120.                 return true;
  121.             }
  122.             if (typeof unsafeWindow !== "undefined" &&
  123.                 target === unsafeWindow) {
  124.                 return true;
  125.             }
  126.             if (target?.Math?.toString() !== "[object Math]") {
  127.                 return false;
  128.             }
  129.             return true;
  130.         },
  131.         /**
  132.          * 删除对象上的属性
  133.          * @param target
  134.          * @param propName
  135.          */
  136.         delete(target, propName) {
  137.             if (typeof Reflect === "object" && Reflect.deleteProperty) {
  138.                 Reflect.deleteProperty(target, propName);
  139.             }
  140.             else {
  141.                 delete target[propName];
  142.             }
  143.         },
  144.     };
  145.  
  146.     /* 数据 */
  147.     const DOMUtilsData = {
  148.         /** .on绑定的事件 */
  149.         SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
  150.     };
  151.  
  152.     const OriginPrototype = {
  153.         Object: {
  154.             defineProperty: Object.defineProperty,
  155.         },
  156.     };
  157.  
  158.     class DOMUtilsEvent {
  159.         on(element, eventType, selector, callback, option) {
  160.             /**
  161.              * 获取option配置
  162.              * @param args
  163.              * @param startIndex
  164.              * @param option
  165.              */
  166.             function getOption(args, startIndex, option) {
  167.                 if (typeof args[startIndex] === "boolean") {
  168.                     option.capture = args[startIndex];
  169.                     if (typeof args[startIndex + 1] === "boolean") {
  170.                         option.once = args[startIndex + 1];
  171.                     }
  172.                     if (typeof args[startIndex + 2] === "boolean") {
  173.                         option.passive = args[startIndex + 2];
  174.                     }
  175.                 }
  176.                 else if (typeof args[startIndex] === "object" &&
  177.                     ("capture" in args[startIndex] ||
  178.                         "once" in args[startIndex] ||
  179.                         "passive" in args[startIndex])) {
  180.                     option.capture = args[startIndex].capture;
  181.                     option.once = args[startIndex].once;
  182.                     option.passive = args[startIndex].passive;
  183.                 }
  184.                 return option;
  185.             }
  186.             let DOMUtilsContext = this;
  187.             let args = arguments;
  188.             if (typeof element === "string") {
  189.                 element = DOMUtilsCore.document.querySelectorAll(element);
  190.             }
  191.             if (element == null) {
  192.                 return;
  193.             }
  194.             let elementList = [];
  195.             if (element instanceof NodeList || Array.isArray(element)) {
  196.                 element = element;
  197.                 elementList = [...element];
  198.             }
  199.             else {
  200.                 elementList.push(element);
  201.             }
  202.             let eventTypeList = [];
  203.             if (Array.isArray(eventType)) {
  204.                 eventTypeList = eventTypeList.concat(eventType);
  205.             }
  206.             else if (typeof eventType === "string") {
  207.                 eventTypeList = eventTypeList.concat(eventType.split(" "));
  208.             }
  209.             let _selector_ = selector;
  210.             let _callback_ = callback;
  211.             let _option_ = {
  212.                 capture: false,
  213.                 once: false,
  214.                 passive: false,
  215.             };
  216.             if (typeof selector === "function") {
  217.                 /* 这是为没有selector的情况 */
  218.                 _selector_ = void 0;
  219.                 _callback_ = selector;
  220.                 _option_ = getOption(args, 3, _option_);
  221.             }
  222.             else {
  223.                 /* 这是存在selector的情况 */
  224.                 _option_ = getOption(args, 4, _option_);
  225.             }
  226.             /**
  227.              * 如果是once，那么删除该监听和元素上的事件和监听
  228.              */
  229.             function checkOptionOnceToRemoveEventListener() {
  230.                 if (_option_.once) {
  231.                     DOMUtilsContext.off(element, eventType, selector, callback, option);
  232.                 }
  233.             }
  234.             elementList.forEach((elementItem) => {
  235.                 function ownCallBack(event) {
  236.                     let target = event.target;
  237.                     if (_selector_) {
  238.                         /* 存在自定义子元素选择器 */
  239.                         let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
  240.                             ? DOMUtilsCore.document.documentElement
  241.                             : elementItem;
  242.                         if (target.matches(_selector_)) {
  243.                             /* 当前目标可以被selector所匹配到 */
  244.                             _callback_.call(target, event);
  245.                             checkOptionOnceToRemoveEventListener();
  246.                         }
  247.                         else if (target.closest(_selector_) &&
  248.                             totalParent.contains(target.closest(_selector_))) {
  249.                             /* 在上层与主元素之间寻找可以被selector所匹配到的 */
  250.                             let closestElement = target.closest(_selector_);
  251.                             /* event的target值不能直接修改 */
  252.                             OriginPrototype.Object.defineProperty(event, "target", {
  253.                                 get() {
  254.                                     return closestElement;
  255.                                 },
  256.                             });
  257.                             _callback_.call(closestElement, event);
  258.                             checkOptionOnceToRemoveEventListener();
  259.                         }
  260.                     }
  261.                     else {
  262.                         _callback_.call(elementItem, event);
  263.                         checkOptionOnceToRemoveEventListener();
  264.                     }
  265.                 }
  266.                 /* 遍历事件名设置元素事件 */
  267.                 eventTypeList.forEach((eventName) => {
  268.                     elementItem.addEventListener(eventName, ownCallBack, _option_);
  269.                     if (_callback_ && _callback_.delegate) {
  270.                         elementItem.setAttribute("data-delegate", _selector_);
  271.                     }
  272.                     /* 获取对象上的事件 */
  273.                     let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
  274.                     /* 初始化对象上的xx事件 */
  275.                     elementEvents[eventName] = elementEvents[eventName] || [];
  276.                     elementEvents[eventName].push({
  277.                         selector: _selector_,
  278.                         option: _option_,
  279.                         callback: ownCallBack,
  280.                         originCallBack: _callback_,
  281.                     });
  282.                     /* 覆盖事件 */
  283.                     elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
  284.                 });
  285.             });
  286.         }
  287.         off(element, eventType, selector, callback, option, filter) {
  288.             /**
  289.              * 获取option配置
  290.              * @param args1
  291.              * @param startIndex
  292.              * @param option
  293.              */
  294.             function getOption(args1, startIndex, option) {
  295.                 if (typeof args1[startIndex] === "boolean") {
  296.                     option.capture = args1[startIndex];
  297.                 }
  298.                 else if (typeof args1[startIndex] === "object" &&
  299.                     "capture" in args1[startIndex]) {
  300.                     option.capture = args1[startIndex].capture;
  301.                 }
  302.                 return option;
  303.             }
  304.             let args = arguments;
  305.             if (typeof element === "string") {
  306.                 element = DOMUtilsCore.document.querySelectorAll(element);
  307.             }
  308.             if (element == null) {
  309.                 return;
  310.             }
  311.             let elementList = [];
  312.             if (element instanceof NodeList || Array.isArray(element)) {
  313.                 element = element;
  314.                 elementList = [...element];
  315.             }
  316.             else {
  317.                 elementList.push(element);
  318.             }
  319.             let eventTypeList = [];
  320.             if (Array.isArray(eventType)) {
  321.                 eventTypeList = eventTypeList.concat(eventType);
  322.             }
  323.             else if (typeof eventType === "string") {
  324.                 eventTypeList = eventTypeList.concat(eventType.split(" "));
  325.             }
  326.             /**
  327.              * 子元素选择器
  328.              */
  329.             let _selector_ = selector;
  330.             /**
  331.              * 事件的回调函数
  332.              */
  333.             let _callback_ = callback;
  334.             /**
  335.              * 事件的配置
  336.              */
  337.             let _option_ = {
  338.                 capture: false,
  339.             };
  340.             if (typeof selector === "function") {
  341.                 /* 这是为没有selector的情况 */
  342.                 _selector_ = void 0;
  343.                 _callback_ = selector;
  344.                 _option_ = getOption(args, 3, _option_);
  345.             }
  346.             else {
  347.                 _option_ = getOption(args, 4, _option_);
  348.             }
  349.             elementList.forEach((elementItem) => {
  350.                 /* 获取对象上的事件 */
  351.                 let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
  352.                 eventTypeList.forEach((eventName) => {
  353.                     let handlers = elementEvents[eventName] || [];
  354.                     if (typeof filter === "function") {
  355.                         handlers = handlers.filter(filter);
  356.                     }
  357.                     for (let index = 0; index < handlers.length; index++) {
  358.                         let handler = handlers[index];
  359.                         let flag = false;
  360.                         if (!_selector_ || handler.selector === _selector_) {
  361.                             /* selector不为空，进行selector判断 */
  362.                             flag = true;
  363.                         }
  364.                         if (!_callback_ ||
  365.                             handler.callback === _callback_ ||
  366.                             handler.originCallBack === _callback_) {
  367.                             /* callback不为空，进行callback判断 */
  368.                             flag = true;
  369.                         }
  370.                         if (flag) {
  371.                             elementItem.removeEventListener(eventName, handler.callback, _option_);
  372.                             handlers.splice(index--, 1);
  373.                         }
  374.                     }
  375.                     if (handlers.length === 0) {
  376.                         /* 如果没有任意的handler，那么删除该属性 */
  377.                         DOMUtilsCommonUtils.delete(elementEvents, eventType);
  378.                     }
  379.                 });
  380.                 elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
  381.             });
  382.         }
  383.         /**
  384.          * 取消绑定所有的事件
  385.          * @param element 需要取消绑定的元素|元素数组
  386.          * @param eventType （可选）需要取消监听的事件
  387.          */
  388.         offAll(element, eventType) {
  389.             if (typeof element === "string") {
  390.                 element = DOMUtilsCore.document.querySelectorAll(element);
  391.             }
  392.             if (element == null) {
  393.                 return;
  394.             }
  395.             let elementList = [];
  396.             if (element instanceof NodeList || Array.isArray(element)) {
  397.                 element = element;
  398.                 elementList = [...element];
  399.             }
  400.             else {
  401.                 elementList.push(element);
  402.             }
  403.             let eventTypeList = [];
  404.             if (Array.isArray(eventType)) {
  405.                 eventTypeList = eventTypeList.concat(eventType);
  406.             }
  407.             else if (typeof eventType === "string") {
  408.                 eventTypeList = eventTypeList.concat(eventType.split(" "));
  409.             }
  410.             elementList.forEach((elementItem) => {
  411.                 Object.getOwnPropertySymbols(elementItem).forEach((symbolEvents) => {
  412.                     if (!symbolEvents.toString().startsWith("Symbol(events_")) {
  413.                         return;
  414.                     }
  415.                     let elementEvents = elementItem[symbolEvents] || {};
  416.                     let iterEventNameList = eventTypeList.length
  417.                         ? eventTypeList
  418.                         : Object.keys(elementEvents);
  419.                     iterEventNameList.forEach((eventName) => {
  420.                         let handlers = elementEvents[eventName];
  421.                         if (!handlers) {
  422.                             return;
  423.                         }
  424.                         for (const handler of handlers) {
  425.                             elementItem.removeEventListener(eventName, handler.callback, {
  426.                                 capture: handler["option"]["capture"],
  427.                             });
  428.                         }
  429.                         DOMUtilsCommonUtils.delete(elementItem[symbolEvents], eventName);
  430.                     });
  431.                 });
  432.             });
  433.         }
  434.         /**
  435.          * 等待文档加载完成后执行指定的函数
  436.          * @param callback 需要执行的函数
  437.          * @example
  438.          * DOMUtils.ready(function(){
  439.          *   console.log("文档加载完毕")
  440.          * })
  441.          */
  442.         ready(callback) {
  443.             if (typeof callback !== "function") {
  444.                 return;
  445.             }
  446.             /**
  447.              * 检测文档是否加载完毕
  448.              */
  449.             function checkDOMReadyState() {
  450.                 try {
  451.                     if (document.readyState === "complete" ||
  452.                         (document.readyState !== "loading" &&
  453.                             !document.documentElement.doScroll)) {
  454.                         return true;
  455.                     }
  456.                     else {
  457.                         return false;
  458.                     }
  459.                 }
  460.                 catch (error) {
  461.                     return false;
  462.                 }
  463.             }
  464.             /**
  465.              * 成功加载完毕后触发的回调函数
  466.              */
  467.             function completed() {
  468.                 removeDomReadyListener();
  469.                 callback();
  470.             }
  471.             let targetList = [
  472.                 {
  473.                     target: DOMUtilsCore.document,
  474.                     eventType: "DOMContentLoaded",
  475.                     callback: completed,
  476.                 },
  477.                 {
  478.                     target: DOMUtilsCore.window,
  479.                     eventType: "load",
  480.                     callback: completed,
  481.                 },
  482.             ];
  483.             /**
  484.              * 添加监听
  485.              */
  486.             function addDomReadyListener() {
  487.                 for (let index = 0; index < targetList.length; index++) {
  488.                     let item = targetList[index];
  489.                     item.target.addEventListener(item.eventType, item.callback);
  490.                 }
  491.             }
  492.             /**
  493.              * 移除监听
  494.              */
  495.             function removeDomReadyListener() {
  496.                 for (let index = 0; index < targetList.length; index++) {
  497.                     let item = targetList[index];
  498.                     item.target.removeEventListener(item.eventType, item.callback);
  499.                 }
  500.             }
  501.             if (checkDOMReadyState()) {
  502.                 /* 检查document状态 */
  503.                 setTimeout(callback);
  504.             }
  505.             else {
  506.                 /* 添加监听 */
  507.                 addDomReadyListener();
  508.             }
  509.         }
  510.         /**
  511.          * 主动触发事件
  512.          * @param element 需要触发的元素|元素数组|window
  513.          * @param eventType 需要触发的事件
  514.          * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
  515.          * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
  516.          * @example
  517.          * // 触发元素a.xx的click事件
  518.          * DOMUtils.trigger(document.querySelector("a.xx"),"click")
  519.          * DOMUtils.trigger("a.xx","click")
  520.          * // 触发元素a.xx的click、tap、hover事件
  521.          * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
  522.          * DOMUtils.trigger("a.xx",["click","tap","hover"])
  523.          */
  524.         trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
  525.             if (typeof element === "string") {
  526.                 element = DOMUtilsCore.document.querySelector(element);
  527.             }
  528.             if (element == null) {
  529.                 return;
  530.             }
  531.             let elementList = [];
  532.             if (element instanceof NodeList || Array.isArray(element)) {
  533.                 element = element;
  534.                 elementList = [...element];
  535.             }
  536.             else {
  537.                 elementList = [element];
  538.             }
  539.             let eventTypeList = [];
  540.             if (Array.isArray(eventType)) {
  541.                 eventTypeList = eventType;
  542.             }
  543.             else if (typeof eventType === "string") {
  544.                 eventTypeList = eventType.split(" ");
  545.             }
  546.             elementList.forEach((elementItem) => {
  547.                 /* 获取对象上的事件 */
  548.                 let events = elementItem[DOMUtilsData.SymbolEvents] || {};
  549.                 eventTypeList.forEach((_eventType_) => {
  550.                     let event = null;
  551.                     if (details && details instanceof Event) {
  552.                         event = details;
  553.                     }
  554.                     else {
  555.                         event = new Event(_eventType_);
  556.                         if (details) {
  557.                             Object.keys(details).forEach((keyName) => {
  558.                                 event[keyName] = details[keyName];
  559.                             });
  560.                         }
  561.                     }
  562.                     if (useDispatchToTriggerEvent == false && _eventType_ in events) {
  563.                         events[_eventType_].forEach((eventsItem) => {
  564.                             eventsItem.callback(event);
  565.                         });
  566.                     }
  567.                     else {
  568.                         elementItem.dispatchEvent(event);
  569.                     }
  570.                 });
  571.             });
  572.         }
  573.         /**
  574.          * 绑定或触发元素的click事件
  575.          * @param element 目标元素
  576.          * @param handler （可选）事件处理函数
  577.          * @param details （可选）赋予触发的Event的额外属性
  578.          * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
  579.          * @example
  580.          * // 触发元素a.xx的click事件
  581.          * DOMUtils.click(document.querySelector("a.xx"))
  582.          * DOMUtils.click("a.xx")
  583.          * DOMUtils.click("a.xx"，function(){
  584.          *  console.log("触发click事件成功")
  585.          * })
  586.          * */
  587.         click(element, handler, details, useDispatchToTriggerEvent) {
  588.             let DOMUtilsContext = this;
  589.             if (typeof element === "string") {
  590.                 element = DOMUtilsCore.document.querySelector(element);
  591.             }
  592.             if (element == null) {
  593.                 return;
  594.             }
  595.             if (handler == null) {
  596.                 DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
  597.             }
  598.             else {
  599.                 DOMUtilsContext.on(element, "click", null, handler);
  600.             }
  601.         }
  602.         /**
  603.          * 绑定或触发元素的blur事件
  604.          * @param element 目标元素
  605.          * @param handler （可选）事件处理函数
  606.          * @param details （可选）赋予触发的Event的额外属性
  607.          * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
  608.          * @example
  609.          * // 触发元素a.xx的blur事件
  610.          * DOMUtils.blur(document.querySelector("a.xx"))
  611.          * DOMUtils.blur("a.xx")
  612.          * DOMUtils.blur("a.xx"，function(){
  613.          *  console.log("触发blur事件成功")
  614.          * })
  615.          * */
  616.         blur(element, handler, details, useDispatchToTriggerEvent) {
  617.             let DOMUtilsContext = this;
  618.             if (typeof element === "string") {
  619.                 element = DOMUtilsCore.document.querySelector(element);
  620.             }
  621.             if (element == null) {
  622.                 return;
  623.             }
  624.             if (handler === null) {
  625.                 DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
  626.             }
  627.             else {
  628.                 DOMUtilsContext.on(element, "blur", null, handler);
  629.             }
  630.         }
  631.         /**
  632.          * 绑定或触发元素的focus事件
  633.          * @param element 目标元素
  634.          * @param handler （可选）事件处理函数
  635.          * @param details （可选）赋予触发的Event的额外属性
  636.          * @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
  637.          * @example
  638.          * // 触发元素a.xx的focus事件
  639.          * DOMUtils.focus(document.querySelector("a.xx"))
  640.          * DOMUtils.focus("a.xx")
  641.          * DOMUtils.focus("a.xx"，function(){
  642.          *  console.log("触发focus事件成功")
  643.          * })
  644.          * */
  645.         focus(element, handler, details, useDispatchToTriggerEvent) {
  646.             let DOMUtilsContext = this;
  647.             if (typeof element === "string") {
  648.                 element = DOMUtilsCore.document.querySelector(element);
  649.             }
  650.             if (element == null) {
  651.                 return;
  652.             }
  653.             if (handler == null) {
  654.                 DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
  655.             }
  656.             else {
  657.                 DOMUtilsContext.on(element, "focus", null, handler);
  658.             }
  659.         }
  660.         /**
  661.          * 当鼠标移入或移出元素时触发事件
  662.          * @param element 当前元素
  663.          * @param handler 事件处理函数
  664.          * @param option 配置
  665.          * @example
  666.          * // 监听a.xx元素的移入或移出
  667.          * DOMUtils.hover(document.querySelector("a.xx"),()=>{
  668.          *   console.log("移入/移除");
  669.          * })
  670.          * DOMUtils.hover("a.xx",()=>{
  671.          *   console.log("移入/移除");
  672.          * })
  673.          */
  674.         hover(element, handler, option) {
  675.             let DOMUtilsContext = this;
  676.             if (typeof element === "string") {
  677.                 element = DOMUtilsCore.document.querySelector(element);
  678.             }
  679.             if (element == null) {
  680.                 return;
  681.             }
  682.             DOMUtilsContext.on(element, "mouseenter", null, handler, option);
  683.             DOMUtilsContext.on(element, "mouseleave", null, handler, option);
  684.         }
  685.         /**
  686.          * 当按键松开时触发事件
  687.          * keydown - > keypress - > keyup
  688.          * @param target 当前元素
  689.          * @param handler 事件处理函数
  690.          * @param option 配置
  691.          * @example
  692.          * // 监听a.xx元素的按键松开
  693.          * DOMUtils.keyup(document.querySelector("a.xx"),()=>{
  694.          *   console.log("按键松开");
  695.          * })
  696.          * DOMUtils.keyup("a.xx",()=>{
  697.          *   console.log("按键松开");
  698.          * })
  699.          */
  700.         keyup(target, handler, option) {
  701.             let DOMUtilsContext = this;
  702.             if (target == null) {
  703.                 return;
  704.             }
  705.             if (typeof target === "string") {
  706.                 target = DOMUtilsCore.document.querySelector(target);
  707.             }
  708.             DOMUtilsContext.on(target, "keyup", null, handler, option);
  709.         }
  710.         /**
  711.          * 当按键按下时触发事件
  712.          * keydown - > keypress - > keyup
  713.          * @param target 目标
  714.          * @param handler 事件处理函数
  715.          * @param option 配置
  716.          * @example
  717.          * // 监听a.xx元素的按键按下
  718.          * DOMUtils.keydown(document.querySelector("a.xx"),()=>{
  719.          *   console.log("按键按下");
  720.          * })
  721.          * DOMUtils.keydown("a.xx",()=>{
  722.          *   console.log("按键按下");
  723.          * })
  724.          */
  725.         keydown(target, handler, option) {
  726.             let DOMUtilsContext = this;
  727.             if (target == null) {
  728.                 return;
  729.             }
  730.             if (typeof target === "string") {
  731.                 target = DOMUtilsCore.document.querySelector(target);
  732.             }
  733.             DOMUtilsContext.on(target, "keydown", null, handler, option);
  734.         }
  735.         /**
  736.          * 当按键按下时触发事件
  737.          * keydown - > keypress - > keyup
  738.          * @param target 目标
  739.          * @param handler 事件处理函数
  740.          * @param option 配置
  741.          * @example
  742.          * // 监听a.xx元素的按键按下
  743.          * DOMUtils.keypress(document.querySelector("a.xx"),()=>{
  744.          *   console.log("按键按下");
  745.          * })
  746.          * DOMUtils.keypress("a.xx",()=>{
  747.          *   console.log("按键按下");
  748.          * })
  749.          */
  750.         keypress(target, handler, option) {
  751.             let DOMUtilsContext = this;
  752.             if (target == null) {
  753.                 return;
  754.             }
  755.             if (typeof target === "string") {
  756.                 target = DOMUtilsCore.document.querySelector(target);
  757.             }
  758.             DOMUtilsContext.on(target, "keypress", null, handler, option);
  759.         }
  760.     }
  761.  
  762.     class DOMUtils extends DOMUtilsEvent {
  763.         constructor(option) {
  764.             DOMUtilsCore.init(option);
  765.             super();
  766.         }
  767.         /** 版本号 */
  768.         version = "2024.5.27";
  769.         attr(element, attrName, attrValue) {
  770.             if (typeof element === "string") {
  771.                 element = DOMUtilsCore.document.querySelector(element);
  772.             }
  773.             if (element == null) {
  774.                 return;
  775.             }
  776.             if (attrValue == null) {
  777.                 return element.getAttribute(attrName);
  778.             }
  779.             else {
  780.                 element.setAttribute(attrName, attrValue);
  781.             }
  782.         }
  783.         /**
  784.          * 创建元素
  785.          * @param tagName 标签名
  786.          * @param property 属性
  787.          * @param attributes 元素上的自定义属性
  788.          * @example
  789.          * // 创建一个DIV元素，且属性class为xxx
  790.          * DOMUtils.createElement("div",undefined,{ class:"xxx" });
  791.          * > <div class="xxx"></div>
  792.          * @example
  793.          * // 创建一个DIV元素
  794.          * DOMUtils.createElement("div");
  795.          * > <div></div>
  796.          * @example
  797.          * // 创建一个DIV元素
  798.          * DOMUtils.createElement("div","测试");
  799.          * > <div>测试</div>
  800.          */
  801.         createElement(
  802.         /** 元素名 */
  803.         tagName, 
  804.         /** 属性 */
  805.         property, 
  806.         /** 自定义属性 */
  807.         attributes) {
  808.             let tempElement = DOMUtilsCore.document.createElement(tagName);
  809.             if (typeof property === "string") {
  810.                 tempElement.innerHTML = property;
  811.                 return tempElement;
  812.             }
  813.             if (property == null) {
  814.                 property = {};
  815.             }
  816.             if (attributes == null) {
  817.                 attributes = {};
  818.             }
  819.             Object.keys(property).forEach((key) => {
  820.                 let value = property[key];
  821.                 tempElement[key] = value;
  822.             });
  823.             Object.keys(attributes).forEach((key) => {
  824.                 let value = attributes[key];
  825.                 if (typeof value === "object") {
  826.                     /* object转字符串 */
  827.                     value = JSON.stringify(value);
  828.                 }
  829.                 else if (typeof value === "function") {
  830.                     /* function转字符串 */
  831.                     value = value.toString();
  832.                 }
  833.                 tempElement.setAttribute(key, value);
  834.             });
  835.             return tempElement;
  836.         }
  837.         css(element, property, value) {
  838.             /**
  839.              * 把纯数字没有px的加上
  840.              */
  841.             function handlePixe(propertyName, propertyValue) {
  842.                 let allowAddPixe = [
  843.                     "width",
  844.                     "height",
  845.                     "top",
  846.                     "left",
  847.                     "right",
  848.                     "bottom",
  849.                     "font-size",
  850.                 ];
  851.                 if (typeof propertyValue === "number") {
  852.                     propertyValue = propertyValue.toString();
  853.                 }
  854.                 if (typeof propertyValue === "string" &&
  855.                     allowAddPixe.includes(propertyName) &&
  856.                     propertyValue.match(/[0-9]$/gi)) {
  857.                     propertyValue = propertyValue + "px";
  858.                 }
  859.                 return propertyValue;
  860.             }
  861.             if (typeof element === "string") {
  862.                 element = DOMUtilsCore.document.querySelector(element);
  863.             }
  864.             if (element == null) {
  865.                 return;
  866.             }
  867.             if (typeof property === "string") {
  868.                 if (value == null) {
  869.                     return getComputedStyle(element).getPropertyValue(property);
  870.                 }
  871.                 else {
  872.                     if (value === "string" && value.includes("!important")) {
  873.                         element.style.setProperty(property, value, "important");
  874.                     }
  875.                     else {
  876.                         value = handlePixe(property, value);
  877.                         element.style.setProperty(property, value);
  878.                     }
  879.                 }
  880.             }
  881.             else if (typeof property === "object") {
  882.                 for (let prop in property) {
  883.                     if (typeof property[prop] === "string" &&
  884.                         property[prop].includes("!important")) {
  885.                         element.style.setProperty(prop, property[prop], "important");
  886.                     }
  887.                     else {
  888.                         property[prop] = handlePixe(prop, property[prop]);
  889.                         element.style.setProperty(prop, property[prop]);
  890.                     }
  891.                 }
  892.             }
  893.         }
  894.         text(element, text) {
  895.             if (typeof element === "string") {
  896.                 element = DOMUtilsCore.document.querySelector(element);
  897.             }
  898.             if (element == null) {
  899.                 return;
  900.             }
  901.             if (text == null) {
  902.                 return element.textContent || element.innerText;
  903.             }
  904.             else {
  905.                 if (text instanceof Node) {
  906.                     text = text.textContent || text.innerText;
  907.                 }
  908.                 if ("textContent" in element) {
  909.                     element.textContent = text;
  910.                 }
  911.                 else if ("innerText" in element) {
  912.                     element.innerText = text;
  913.                 }
  914.             }
  915.         }
  916.         html(element, html) {
  917.             if (typeof element === "string") {
  918.                 element = DOMUtilsCore.document.querySelector(element);
  919.             }
  920.             if (element == null) {
  921.                 return;
  922.             }
  923.             if (html == null) {
  924.                 return element.innerHTML;
  925.             }
  926.             else {
  927.                 if (html instanceof Node) {
  928.                     html = html.innerHTML;
  929.                 }
  930.                 if ("innerHTML" in element) {
  931.                     element.innerHTML = html;
  932.                 }
  933.             }
  934.         }
  935.         /**
  936.          * 获取移动元素的transform偏移
  937.          */
  938.         getTransform(element, isShow = false) {
  939.             let DOMUtilsContext = this;
  940.             let transform_left = 0;
  941.             let transform_top = 0;
  942.             if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
  943.                 /* 未显示 */
  944.                 let { recovery } = DOMUtilsCommonUtils.showElement(element);
  945.                 let transformInfo = DOMUtilsContext.getTransform(element, true);
  946.                 recovery();
  947.                 return transformInfo;
  948.             }
  949.             let elementTransform = getComputedStyle(element).transform;
  950.             if (elementTransform != null &&
  951.                 elementTransform !== "none" &&
  952.                 elementTransform !== "") {
  953.                 let elementTransformSplit = elementTransform
  954.                     .match(/\((.+)\)/)?.[1]
  955.                     .split(",");
  956.                 if (elementTransformSplit) {
  957.                     transform_left = Math.abs(parseInt(elementTransformSplit[4]));
  958.                     transform_top = Math.abs(parseInt(elementTransformSplit[5]));
  959.                 }
  960.                 else {
  961.                     transform_left = 0;
  962.                     transform_top = 0;
  963.                 }
  964.             }
  965.             return {
  966.                 transformLeft: transform_left,
  967.                 transformTop: transform_top,
  968.             };
  969.         }
  970.         val(element, value) {
  971.             if (typeof element === "string") {
  972.                 element = DOMUtilsCore.document.querySelector(element);
  973.             }
  974.             if (element == null) {
  975.                 return;
  976.             }
  977.             if (value == null) {
  978.                 if (element.localName === "input" &&
  979.                     (element.type === "checkbox" || element.type === "radio")) {
  980.                     return element.checked;
  981.                 }
  982.                 else {
  983.                     return element.value;
  984.                 }
  985.             }
  986.             else {
  987.                 if (element.localName === "input" &&
  988.                     (element.type === "checkbox" || element.type === "radio")) {
  989.                     element.checked = !!value;
  990.                 }
  991.                 else {
  992.                     element.value = value;
  993.                 }
  994.             }
  995.         }
  996.         prop(element, propName, propValue) {
  997.             if (element == null) {
  998.                 return;
  999.             }
  1000.             if (typeof element === "string") {
  1001.                 element = DOMUtilsCore.document.querySelector(element);
  1002.             }
  1003.             if (propValue == null) {
  1004.                 return element[propName];
  1005.             }
  1006.             else {
  1007.                 element[propName] = propValue;
  1008.             }
  1009.         }
  1010.         /**
  1011.          * 移除元素的属性
  1012.          * @param element 目标元素
  1013.          * @param attrName 属性名
  1014.          * @example
  1015.          * // 移除元素a.xx的属性data-value
  1016.          * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
  1017.          * DOMUtils.removeAttr("a.xx","data-value")
  1018.          * */
  1019.         removeAttr(element, attrName) {
  1020.             if (typeof element === "string") {
  1021.                 element = DOMUtilsCore.document.querySelector(element);
  1022.             }
  1023.             if (element == null) {
  1024.                 return;
  1025.             }
  1026.             element.removeAttribute(attrName);
  1027.         }
  1028.         /**
  1029.          * 移除元素class名
  1030.          * @param element 目标元素
  1031.          * @param className 类名
  1032.          * @example
  1033.          * // 移除元素a.xx的className为xx
  1034.          * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
  1035.          * DOMUtils.removeClass("a.xx","xx")
  1036.          */
  1037.         removeClass(element, className) {
  1038.             if (typeof element === "string") {
  1039.                 element = DOMUtilsCore.document.querySelector(element);
  1040.             }
  1041.             if (element == null) {
  1042.                 return;
  1043.             }
  1044.             if (className == null) {
  1045.                 return;
  1046.             }
  1047.             element.classList.remove(className);
  1048.         }
  1049.         /**
  1050.          * 移除元素的属性
  1051.          * @param element 目标元素
  1052.          * @param propName 属性名
  1053.          * @example
  1054.          * // 移除元素a.xx的href属性
  1055.          * DOMUtils.removeProp(document.querySelector("a.xx"),"href")
  1056.          * DOMUtils.removeProp("a.xx","href")
  1057.          * */
  1058.         removeProp(element, propName) {
  1059.             if (typeof element === "string") {
  1060.                 element = DOMUtilsCore.document.querySelector(element);
  1061.             }
  1062.             if (element == null) {
  1063.                 return;
  1064.             }
  1065.             DOMUtilsCommonUtils.delete(element, propName);
  1066.         }
  1067.         /**
  1068.          * 将一个元素替换为另一个元素
  1069.          * @param element 目标元素
  1070.          * @param newElement 新元素
  1071.          * @example
  1072.          * // 替换元素a.xx为b.xx
  1073.          * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1074.          * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
  1075.          */
  1076.         replaceWith(element, newElement) {
  1077.             let DOMUtilsContext = this;
  1078.             if (typeof element === "string") {
  1079.                 element = DOMUtilsCore.document.querySelector(element);
  1080.             }
  1081.             if (element == null) {
  1082.                 return;
  1083.             }
  1084.             if (typeof newElement === "string") {
  1085.                 newElement = DOMUtilsContext.parseHTML(newElement, false, false);
  1086.             }
  1087.             if (element instanceof NodeList || element instanceof Array) {
  1088.                 element.forEach((item) => {
  1089.                     DOMUtilsContext.replaceWith(item, newElement);
  1090.                 });
  1091.             }
  1092.             else {
  1093.                 element.parentElement.replaceChild(newElement, element);
  1094.             }
  1095.         }
  1096.         /**
  1097.          * 给元素添加class
  1098.          * @param element 目标元素
  1099.          * @param className class名
  1100.          * @example
  1101.          * // 元素a.xx的className添加_vue_
  1102.          * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
  1103.          * DOMUtils.addClass("a.xx","_vue_")
  1104.          * */
  1105.         addClass(element, className) {
  1106.             if (typeof element === "string") {
  1107.                 element = DOMUtilsCore.document.querySelector(element);
  1108.             }
  1109.             if (element == null) {
  1110.                 return;
  1111.             }
  1112.             element.classList.add(className);
  1113.         }
  1114.         /**
  1115.          * 函数在元素内部末尾添加子元素或HTML字符串
  1116.          * @param element 目标元素
  1117.          * @param content 子元素或HTML字符串
  1118.          * @example
  1119.          * // 元素a.xx的内部末尾添加一个元素
  1120.          * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1121.          * DOMUtils.append("a.xx","'<b class="xx"></b>")
  1122.          * */
  1123.         append(element, content) {
  1124.             if (typeof element === "string") {
  1125.                 element = DOMUtilsCore.document.querySelector(element);
  1126.             }
  1127.             if (element == null) {
  1128.                 return;
  1129.             }
  1130.             function elementAppendChild(ele, text) {
  1131.                 if (typeof content === "string") {
  1132.                     ele.insertAdjacentHTML("beforeend", text);
  1133.                 }
  1134.                 else {
  1135.                     ele.appendChild(text);
  1136.                 }
  1137.             }
  1138.             if (Array.isArray(content) || content instanceof NodeList) {
  1139.                 /* 数组 */
  1140.                 let fragment = DOMUtilsCore.document.createDocumentFragment();
  1141.                 content.forEach((ele) => {
  1142.                     if (typeof ele === "string") {
  1143.                         ele = this.parseHTML(ele, true, false);
  1144.                     }
  1145.                     fragment.appendChild(ele);
  1146.                 });
  1147.                 element.appendChild(fragment);
  1148.             }
  1149.             else {
  1150.                 elementAppendChild(element, content);
  1151.             }
  1152.         }
  1153.         /**
  1154.          * 函数 在元素内部开头添加子元素或HTML字符串
  1155.          * @param element 目标元素
  1156.          * @param content 子元素或HTML字符串
  1157.          * @example
  1158.          * // 元素a.xx内部开头添加一个元素
  1159.          * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1160.          * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
  1161.          * */
  1162.         prepend(element, content) {
  1163.             if (typeof element === "string") {
  1164.                 element = DOMUtilsCore.document.querySelector(element);
  1165.             }
  1166.             if (element == null) {
  1167.                 return;
  1168.             }
  1169.             if (typeof content === "string") {
  1170.                 element.insertAdjacentHTML("afterbegin", content);
  1171.             }
  1172.             else {
  1173.                 element.insertBefore(content, element.firstChild);
  1174.             }
  1175.         }
  1176.         /**
  1177.          * 在元素后面添加兄弟元素或HTML字符串
  1178.          * @param element 目标元素
  1179.          * @param content 兄弟元素或HTML字符串
  1180.          * @example
  1181.          * // 元素a.xx后面添加一个元素
  1182.          * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1183.          * DOMUtils.after("a.xx","'<b class="xx"></b>")
  1184.          * */
  1185.         after(element, content) {
  1186.             if (typeof element === "string") {
  1187.                 element = DOMUtilsCore.document.querySelector(element);
  1188.             }
  1189.             if (element == null) {
  1190.                 return;
  1191.             }
  1192.             if (typeof content === "string") {
  1193.                 element.insertAdjacentHTML("afterend", content);
  1194.             }
  1195.             else {
  1196.                 element.parentElement.insertBefore(content, element.nextSibling);
  1197.             }
  1198.         }
  1199.         /**
  1200.          * 在元素前面添加兄弟元素或HTML字符串
  1201.          * @param element 目标元素
  1202.          * @param content 兄弟元素或HTML字符串
  1203.          * @example
  1204.          * // 元素a.xx前面添加一个元素
  1205.          * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
  1206.          * DOMUtils.before("a.xx","'<b class="xx"></b>")
  1207.          * */
  1208.         before(element, content) {
  1209.             if (typeof element === "string") {
  1210.                 element = DOMUtilsCore.document.querySelector(element);
  1211.             }
  1212.             if (element == null) {
  1213.                 return;
  1214.             }
  1215.             if (typeof content === "string") {
  1216.                 element.insertAdjacentHTML("beforebegin", content);
  1217.             }
  1218.             else {
  1219.                 element.parentElement.insertBefore(content, element);
  1220.             }
  1221.         }
  1222.         /**
  1223.          * 移除元素
  1224.          * @param target 目标元素
  1225.          * @example
  1226.          * // 元素a.xx前面添加一个元素
  1227.          * DOMUtils.remove(document.querySelector("a.xx"))
  1228.          * DOMUtils.remove(document.querySelectorAll("a.xx"))
  1229.          * DOMUtils.remove("a.xx")
  1230.          * */
  1231.         remove(target) {
  1232.             let DOMUtilsContext = this;
  1233.             if (typeof target === "string") {
  1234.                 target = DOMUtilsCore.document.querySelectorAll(target);
  1235.             }
  1236.             if (target == null) {
  1237.                 return;
  1238.             }
  1239.             if (target instanceof NodeList || target instanceof Array) {
  1240.                 target = target;
  1241.                 for (const element of target) {
  1242.                     DOMUtilsContext.remove(element);
  1243.                 }
  1244.             }
  1245.             else {
  1246.                 target.remove();
  1247.             }
  1248.         }
  1249.         /**
  1250.          * 移除元素的所有子元素
  1251.          * @param element 目标元素
  1252.          * @example
  1253.          * // 移除元素a.xx元素的所有子元素
  1254.          * DOMUtils.empty(document.querySelector("a.xx"))
  1255.          * DOMUtils.empty("a.xx")
  1256.          * */
  1257.         empty(element) {
  1258.             if (typeof element === "string") {
  1259.                 element = DOMUtilsCore.document.querySelector(element);
  1260.             }
  1261.             if (element == null) {
  1262.                 return;
  1263.             }
  1264.             element.innerHTML = "";
  1265.         }
  1266.         /**
  1267.          * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
  1268.          * @param element 目标元素
  1269.          * @example
  1270.          * // 获取元素a.xx的对于文档的偏移坐标
  1271.          * DOMUtils.offset(document.querySelector("a.xx"))
  1272.          * DOMUtils.offset("a.xx")
  1273.          * > 0
  1274.          */
  1275.         offset(element) {
  1276.             if (typeof element === "string") {
  1277.                 element = DOMUtilsCore.document.querySelector(element);
  1278.             }
  1279.             if (element == null) {
  1280.                 return;
  1281.             }
  1282.             let rect = element.getBoundingClientRect();
  1283.             return {
  1284.                 /** y轴偏移 */
  1285.                 top: rect.top + DOMUtilsCore.globalThis.scrollY,
  1286.                 /** x轴偏移 */
  1287.                 left: rect.left + DOMUtilsCore.globalThis.scrollX,
  1288.             };
  1289.         }
  1290.         width(element, isShow = false) {
  1291.             let DOMUtilsContext = this;
  1292.             if (typeof element === "string") {
  1293.                 element = DOMUtilsCore.document.querySelector(element);
  1294.             }
  1295.             if (element == null) {
  1296.                 return;
  1297.             }
  1298.             if (DOMUtilsCommonUtils.isWin(element)) {
  1299.                 return DOMUtilsCore.window.document.documentElement.clientWidth;
  1300.             }
  1301.             if (element.nodeType === 9) {
  1302.                 /* Document文档节点 */
  1303.                 element = element;
  1304.                 return Math.max(element.body.scrollWidth, element.documentElement.scrollWidth, element.body.offsetWidth, element.documentElement.offsetWidth, element.documentElement.clientWidth);
  1305.             }
  1306.             if (isShow ||
  1307.                 (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  1308.                 /* 已显示 */
  1309.                 /* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
  1310.                 element = element;
  1311.                 /* 如果element.style.width为空  则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
  1312.                 if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString()) > 0) {
  1313.                     return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString());
  1314.                 }
  1315.                 /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetWidth来进行计算 */
  1316.                 if (element.offsetWidth > 0) {
  1317.                     let borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
  1318.                     let borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
  1319.                     let paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
  1320.                     let paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
  1321.                     let backHeight = parseFloat(element.offsetWidth.toString()) -
  1322.                         parseFloat(borderLeftWidth.toString()) -
  1323.                         parseFloat(borderRightWidth.toString()) -
  1324.                         parseFloat(paddingLeft.toString()) -
  1325.                         parseFloat(paddingRight.toString());
  1326.                     return parseFloat(backHeight.toString());
  1327.                 }
  1328.                 return 0;
  1329.             }
  1330.             else {
  1331.                 /* 未显示 */
  1332.                 element = element;
  1333.                 let { recovery } = DOMUtilsCommonUtils.showElement(element);
  1334.                 let width = DOMUtilsContext.width(element, true);
  1335.                 recovery();
  1336.                 return width;
  1337.             }
  1338.         }
  1339.         height(element, isShow = false) {
  1340.             let DOMUtilsContext = this;
  1341.             if (DOMUtilsCommonUtils.isWin(element)) {
  1342.                 return DOMUtilsCore.window.document.documentElement.clientHeight;
  1343.             }
  1344.             if (typeof element === "string") {
  1345.                 element = DOMUtilsCore.document.querySelector(element);
  1346.             }
  1347.             if (element == null) {
  1348.                 // @ts-ignore
  1349.                 return;
  1350.             }
  1351.             if (element.nodeType === 9) {
  1352.                 element = element;
  1353.                 /* Document文档节点 */
  1354.                 return Math.max(element.body.scrollHeight, element.documentElement.scrollHeight, element.body.offsetHeight, element.documentElement.offsetHeight, element.documentElement.clientHeight);
  1355.             }
  1356.             if (isShow ||
  1357.                 (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  1358.                 element = element;
  1359.                 /* 已显示 */
  1360.                 /* 从style中获取对应的高度，因为可能使用了class定义了width !important */
  1361.                 /* 如果element.style.height为空  则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
  1362.                 if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString()) > 0) {
  1363.                     return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString());
  1364.                 }
  1365.                 /* 如果从css里获取到的值不是大于0  可能是auto 则通过offsetHeight来进行计算 */
  1366.                 if (element.offsetHeight > 0) {
  1367.                     let borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
  1368.                     let borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
  1369.                     let paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
  1370.                     let paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
  1371.                     let backHeight = parseFloat(element.offsetHeight.toString()) -
  1372.                         parseFloat(borderTopWidth.toString()) -
  1373.                         parseFloat(borderBottomWidth.toString()) -
  1374.                         parseFloat(paddingTop.toString()) -
  1375.                         parseFloat(paddingBottom.toString());
  1376.                     return parseFloat(backHeight.toString());
  1377.                 }
  1378.                 return 0;
  1379.             }
  1380.             else {
  1381.                 /* 未显示 */
  1382.                 element = element;
  1383.                 let { recovery } = DOMUtilsCommonUtils.showElement(element);
  1384.                 let height = DOMUtilsContext.height(element, true);
  1385.                 recovery();
  1386.                 return height;
  1387.             }
  1388.         }
  1389.         outerWidth(element, isShow = false) {
  1390.             let DOMUtilsContext = this;
  1391.             if (DOMUtilsCommonUtils.isWin(element)) {
  1392.                 return DOMUtilsCore.window.innerWidth;
  1393.             }
  1394.             if (typeof element === "string") {
  1395.                 element = DOMUtilsCore.document.querySelector(element);
  1396.             }
  1397.             if (element == null) {
  1398.                 // @ts-ignore
  1399.                 return;
  1400.             }
  1401.             element = element;
  1402.             if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  1403.                 let style = getComputedStyle(element, null);
  1404.                 let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
  1405.                 let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
  1406.                 return element.offsetWidth + marginLeft + marginRight;
  1407.             }
  1408.             else {
  1409.                 let { recovery } = DOMUtilsCommonUtils.showElement(element);
  1410.                 let outerWidth = DOMUtilsContext.outerWidth(element, true);
  1411.                 recovery();
  1412.                 return outerWidth;
  1413.             }
  1414.         }
  1415.         outerHeight(element, isShow = false) {
  1416.             let DOMUtilsContext = this;
  1417.             if (DOMUtilsCommonUtils.isWin(element)) {
  1418.                 return DOMUtilsCore.window.innerHeight;
  1419.             }
  1420.             if (typeof element === "string") {
  1421.                 element = DOMUtilsCore.document.querySelector(element);
  1422.             }
  1423.             if (element == null) {
  1424.                 // @ts-ignore
  1425.                 return;
  1426.             }
  1427.             element = element;
  1428.             if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
  1429.                 let style = getComputedStyle(element, null);
  1430.                 let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
  1431.                 let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
  1432.                 return element.offsetHeight + marginTop + marginBottom;
  1433.             }
  1434.             else {
  1435.                 let { recovery } = DOMUtilsCommonUtils.showElement(element);
  1436.                 let outerHeight = DOMUtilsContext.outerHeight(element, true);
  1437.                 recovery();
  1438.                 return outerHeight;
  1439.             }
  1440.         }
  1441.         /**
  1442.          * 在一定时间内改变元素的样式属性，实现动画效果
  1443.          * @param element 需要进行动画的元素
  1444.          * @param styles 动画结束时元素的样式属性
  1445.          * @param duration 动画持续时间，单位为毫秒
  1446.          * @param callback 动画结束后执行的函数
  1447.          * @example
  1448.          * // 监听元素a.xx的从显示变为隐藏
  1449.          * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
  1450.          *   console.log("已往上位移100px")
  1451.          * })
  1452.          */
  1453.         animate(element, styles, duration = 1000, callback = null) {
  1454.             if (typeof element === "string") {
  1455.                 element = DOMUtilsCore.document.querySelector(element);
  1456.             }
  1457.             if (element == null) {
  1458.                 return;
  1459.             }
  1460.             if (typeof duration !== "number" || duration <= 0) {
  1461.                 throw new TypeError("duration must be a positive number");
  1462.             }
  1463.             if (typeof callback !== "function" && callback !== void 0) {
  1464.                 throw new TypeError("callback must be a function or null");
  1465.             }
  1466.             if (typeof styles !== "object" || styles === void 0) {
  1467.                 throw new TypeError("styles must be an object");
  1468.             }
  1469.             if (Object.keys(styles).length === 0) {
  1470.                 throw new Error("styles must contain at least one property");
  1471.             }
  1472.             let start = performance.now();
  1473.             let from = {};
  1474.             let to = {};
  1475.             for (let prop in styles) {
  1476.                 from[prop] = element.style[prop] || getComputedStyle(element)[prop];
  1477.                 to[prop] = styles[prop];
  1478.             }
  1479.             let timer = setInterval(function () {
  1480.                 let timePassed = performance.now() - start;
  1481.                 let progress = timePassed / duration;
  1482.                 if (progress > 1) {
  1483.                     progress = 1;
  1484.                 }
  1485.                 for (let prop in styles) {
  1486.                     element.style[prop] =
  1487.                         from[prop] + (to[prop] - from[prop]) * progress + "px";
  1488.                 }
  1489.                 if (progress === 1) {
  1490.                     clearInterval(timer);
  1491.                     if (callback) {
  1492.                         callback();
  1493.                     }
  1494.                 }
  1495.             }, 10);
  1496.         }
  1497.         /**
  1498.          * 将一个元素包裹在指定的HTML元素中
  1499.          * @param element 要包裹的元素
  1500.          * @param wrapperHTML 要包裹的HTML元素的字符串表示形式
  1501.          * @example
  1502.          * // 将a.xx元素外面包裹一层div
  1503.          * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
  1504.          */
  1505.         wrap(element, wrapperHTML) {
  1506.             if (typeof element === "string") {
  1507.                 element = DOMUtilsCore.document.querySelector(element);
  1508.             }
  1509.             if (element == null) {
  1510.                 return;
  1511.             }
  1512.             element = element;
  1513.             // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
  1514.             let wrapper = DOMUtilsCore.document.createElement("div");
  1515.             wrapper.innerHTML = wrapperHTML;
  1516.             let wrapperFirstChild = wrapper.firstChild;
  1517.             // 将要包裹的元素插入目标元素前面
  1518.             element.parentElement.insertBefore(wrapperFirstChild, element);
  1519.             // 将要包裹的元素移动到wrapper中
  1520.             wrapperFirstChild.appendChild(element);
  1521.         }
  1522.         prev(element) {
  1523.             if (typeof element === "string") {
  1524.                 element = DOMUtilsCore.document.querySelector(element);
  1525.             }
  1526.             if (element == null) {
  1527.                 return;
  1528.             }
  1529.             return element.previousElementSibling;
  1530.         }
  1531.         next(element) {
  1532.             if (typeof element === "string") {
  1533.                 element = DOMUtilsCore.document.querySelector(element);
  1534.             }
  1535.             if (element == null) {
  1536.                 return;
  1537.             }
  1538.             return element.nextElementSibling;
  1539.         }
  1540.         /**
  1541.          * 取消挂载在window下的DOMUtils并返回DOMUtils
  1542.          * @example
  1543.          * let DOMUtils = window.DOMUtils.noConflict()
  1544.          */
  1545.         noConflict() {
  1546.             if (DOMUtilsCore.window.DOMUtils) {
  1547.                 DOMUtilsCommonUtils.delete(window, "DOMUtils");
  1548.             }
  1549.             DOMUtilsCore.window.DOMUtils = this;
  1550.             return this;
  1551.         }
  1552.         siblings(element) {
  1553.             if (typeof element === "string") {
  1554.                 element = DOMUtilsCore.document.querySelector(element);
  1555.             }
  1556.             if (element == null) {
  1557.                 return;
  1558.             }
  1559.             return Array.from(element.parentElement
  1560.                 .children).filter((child) => child !== element);
  1561.         }
  1562.         /**
  1563.          * 获取当前元素的父元素
  1564.          * @param element 当前元素
  1565.          * @returns 父元素
  1566.          * @example
  1567.          * // 获取a.xx元素的父元素
  1568.          * DOMUtils.parent(document.querySelector("a.xx"))
  1569.          * DOMUtils.parent("a.xx")
  1570.          * > <div ...>....</div>
  1571.          */
  1572.         parent(element) {
  1573.             let DOMUtilsContext = this;
  1574.             if (typeof element === "string") {
  1575.                 element = DOMUtilsCore.document.querySelector(element);
  1576.             }
  1577.             if (element == null) {
  1578.                 return;
  1579.             }
  1580.             if (element instanceof NodeList || element instanceof Array) {
  1581.                 element = element;
  1582.                 let resultArray = [];
  1583.                 element.forEach((eleItem) => {
  1584.                     resultArray.push(DOMUtilsContext.parent(eleItem));
  1585.                 });
  1586.                 return resultArray;
  1587.             }
  1588.             else {
  1589.                 return element.parentElement;
  1590.             }
  1591.         }
  1592.         parseHTML(html, useParser = false, isComplete = false) {
  1593.             function parseHTMLByDOMParser() {
  1594.                 let parser = new DOMParser();
  1595.                 if (isComplete) {
  1596.                     return parser.parseFromString(html, "text/html");
  1597.                 }
  1598.                 else {
  1599.                     return parser.parseFromString(html, "text/html").body.firstChild;
  1600.                 }
  1601.             }
  1602.             function parseHTMLByCreateDom() {
  1603.                 let tempDIV = DOMUtilsCore.document.createElement("div");
  1604.                 tempDIV.innerHTML = html;
  1605.                 if (isComplete) {
  1606.                     return tempDIV;
  1607.                 }
  1608.                 else {
  1609.                     return tempDIV.firstChild;
  1610.                 }
  1611.             }
  1612.             if (useParser) {
  1613.                 return parseHTMLByDOMParser();
  1614.             }
  1615.             else {
  1616.                 return parseHTMLByCreateDom();
  1617.             }
  1618.         }
  1619.         /**
  1620.          * 显示元素
  1621.          * @param target 当前元素
  1622.          * @example
  1623.          * // 显示a.xx元素
  1624.          * DOMUtils.show(document.querySelector("a.xx"))
  1625.          * DOMUtils.show(document.querySelectorAll("a.xx"))
  1626.          * DOMUtils.show("a.xx")
  1627.          */
  1628.         show(target) {
  1629.             let DOMUtilsContext = this;
  1630.             if (target == null) {
  1631.                 return;
  1632.             }
  1633.             if (typeof target === "string") {
  1634.                 target = DOMUtilsCore.document.querySelectorAll(target);
  1635.             }
  1636.             if (target instanceof NodeList || target instanceof Array) {
  1637.                 target = target;
  1638.                 for (const element of target) {
  1639.                     DOMUtilsContext.show(element);
  1640.                 }
  1641.             }
  1642.             else {
  1643.                 target = target;
  1644.                 target.style.display = "";
  1645.                 if (!DOMUtilsCommonUtils.isShow(target)) {
  1646.                     /* 仍然是不显示，尝试使用强覆盖 */
  1647.                     target.style.setProperty("display", "unset", "important");
  1648.                 }
  1649.             }
  1650.         }
  1651.         /**
  1652.          * 隐藏元素
  1653.          * @param target 当前元素
  1654.          * @example
  1655.          * // 隐藏a.xx元素
  1656.          * DOMUtils.hide(document.querySelector("a.xx"))
  1657.          * DOMUtils.hide(document.querySelectorAll("a.xx"))
  1658.          * DOMUtils.hide("a.xx")
  1659.          */
  1660.         hide(target) {
  1661.             let DOMUtilsContext = this;
  1662.             if (target == null) {
  1663.                 return;
  1664.             }
  1665.             if (typeof target === "string") {
  1666.                 target = DOMUtilsCore.document.querySelectorAll(target);
  1667.             }
  1668.             if (target instanceof NodeList || target instanceof Array) {
  1669.                 target = target;
  1670.                 for (const element of target) {
  1671.                     DOMUtilsContext.hide(element);
  1672.                 }
  1673.             }
  1674.             else {
  1675.                 target = target;
  1676.                 target.style.display = "none";
  1677.                 if (DOMUtilsCommonUtils.isShow(target)) {
  1678.                     /* 仍然是显示，尝试使用强覆盖 */
  1679.                     target.style.setProperty("display", "none", "important");
  1680.                 }
  1681.             }
  1682.         }
  1683.         /**
  1684.          * 淡入元素
  1685.          * @param element 当前元素
  1686.          * @param duration 动画持续时间（毫秒），默认400毫秒
  1687.          * @param callback 动画结束的回调
  1688.          * @example
  1689.          * // 元素a.xx淡入
  1690.          * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
  1691.          *   console.log("淡入完毕");
  1692.          * })
  1693.          * DOMUtils.fadeIn("a.xx",undefined,()=>{
  1694.          *   console.log("淡入完毕");
  1695.          * })
  1696.          */
  1697.         fadeIn(element, duration = 400, callback) {
  1698.             if (element == null) {
  1699.                 return;
  1700.             }
  1701.             if (typeof element === "string") {
  1702.                 element = DOMUtilsCore.document.querySelector(element);
  1703.             }
  1704.             element = element;
  1705.             element.style.opacity = "0";
  1706.             element.style.display = "";
  1707.             let start = null;
  1708.             let timer = null;
  1709.             function step(timestamp) {
  1710.                 if (!start)
  1711.                     start = timestamp;
  1712.                 let progress = timestamp - start;
  1713.                 element = element;
  1714.                 element.style.opacity = Math.min(progress / duration, 1).toString();
  1715.                 if (progress < duration) {
  1716.                     DOMUtilsCore.window.requestAnimationFrame(step);
  1717.                 }
  1718.                 else {
  1719.                     if (callback && typeof callback === "function") {
  1720.                         callback();
  1721.                     }
  1722.                     DOMUtilsCore.window.cancelAnimationFrame(timer);
  1723.                 }
  1724.             }
  1725.             timer = DOMUtilsCore.window.requestAnimationFrame(step);
  1726.         }
  1727.         /**
  1728.          * 淡出元素
  1729.          * @param element 当前元素
  1730.          * @param duration 动画持续时间（毫秒），默认400毫秒
  1731.          * @param callback 动画结束的回调
  1732.          * @example
  1733.          * // 元素a.xx淡出
  1734.          * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
  1735.          *   console.log("淡出完毕");
  1736.          * })
  1737.          * DOMUtils.fadeOut("a.xx",undefined,()=>{
  1738.          *   console.log("淡出完毕");
  1739.          * })
  1740.          */
  1741.         fadeOut(element, duration = 400, callback) {
  1742.             if (element == null) {
  1743.                 return;
  1744.             }
  1745.             if (typeof element === "string") {
  1746.                 element = DOMUtilsCore.document.querySelector(element);
  1747.             }
  1748.             element = element;
  1749.             element.style.opacity = "1";
  1750.             let start = null;
  1751.             let timer = null;
  1752.             function step(timestamp) {
  1753.                 if (!start)
  1754.                     start = timestamp;
  1755.                 let progress = timestamp - start;
  1756.                 element = element;
  1757.                 element.style.opacity = Math.max(1 - progress / duration, 0).toString();
  1758.                 if (progress < duration) {
  1759.                     DOMUtilsCore.window.requestAnimationFrame(step);
  1760.                 }
  1761.                 else {
  1762.                     element.style.display = "none";
  1763.                     if (typeof callback === "function") {
  1764.                         callback();
  1765.                     }
  1766.                     DOMUtilsCore.window.cancelAnimationFrame(timer);
  1767.                 }
  1768.             }
  1769.             timer = DOMUtilsCore.window.requestAnimationFrame(step);
  1770.         }
  1771.         /**
  1772.          * 切换元素的显示和隐藏状态
  1773.          * @param element 当前元素
  1774.          * @example
  1775.          * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
  1776.          * DOMUtils.toggle(document.querySelector("a.xx"))
  1777.          * DOMUtils.toggle("a.xx")
  1778.          */
  1779.         toggle(element) {
  1780.             let DOMUtilsContext = this;
  1781.             if (typeof element === "string") {
  1782.                 element = DOMUtilsCore.document.querySelector(element);
  1783.             }
  1784.             if (element == null) {
  1785.                 return;
  1786.             }
  1787.             if (getComputedStyle(element).getPropertyValue("display") === "none") {
  1788.                 DOMUtilsContext.show(element);
  1789.             }
  1790.             else {
  1791.                 DOMUtilsContext.hide(element);
  1792.             }
  1793.         }
  1794.         /**
  1795.          * 创建一个新的DOMUtils实例
  1796.          * @param option
  1797.          * @returns
  1798.          */
  1799.         createDOMUtils(option) {
  1800.             return new DOMUtils(option);
  1801.         }
  1802.     }
  1803.     let domUtils = new DOMUtils();
  1804.  
  1805.     return domUtils;
  1806.  
  1807. }));
  1808. //# sourceMappingURL=index.umd.js.map

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址