@whitesev/domutils 1.0.0 → 1.0.3

package/dist/index.umd.js

@@ -4,6 +4,39 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
 })(this, (function () { 'use strict';
 
+    const DOMUtilsCoreDefaultEnv = {
+        document: document,
+        window: window,
+        globalThis: globalThis,
+        self: self,
+    };
+    const DOMUtilsCoreEnv = {
+        document: document,
+        window: window,
+        globalThis: globalThis,
+        self: self,
+    };
+    const DOMUtilsCore = {
+        init(option) {
+            if (!option) {
+                option = Object.assign({}, DOMUtilsCoreDefaultEnv);
+            }
+            Object.assign(DOMUtilsCoreEnv, option);
+        },
+        get document() {
+            return DOMUtilsCoreEnv.document;
+        },
+        get window() {
+            return DOMUtilsCoreEnv.window;
+        },
+        get globalThis() {
+            return DOMUtilsCoreEnv.globalThis;
+        },
+        get self() {
+            return DOMUtilsCoreEnv.self;
+        },
+    };
+
     /** 通用工具类 */
     const CommonDOMUtils = {
         /**
@@ -20,7 +53,7 @@
         showElement(element) {
             let dupNode = element.cloneNode(true);
             dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
-            document.documentElement.appendChild(dupNode);
+            DOMUtilsCore.document.documentElement.appendChild(dupNode);
             return {
                 /**
                  * 恢复修改的style
@@ -113,11 +146,14 @@
     };
 
     class DOMUtils {
+        constructor(option) {
+            DOMUtilsCore.init(option);
+        }
         /** 版本号 */
         version = "2024.5.24";
         attr(element, attrName, attrValue) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -154,7 +190,7 @@
         property, 
         /** 自定义属性 */
         attributes) {
-            let tempElement = document.createElement(tagName);
+            let tempElement = DOMUtilsCore.document.createElement(tagName);
             if (typeof property === "string") {
                 tempElement.innerHTML = property;
                 return tempElement;
@@ -208,7 +244,7 @@
                 return propertyValue;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -242,7 +278,7 @@
         }
         text(element, text) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -264,7 +300,7 @@
         }
         html(element, html) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -298,7 +334,7 @@
         click(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -327,7 +363,7 @@
         blur(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -356,7 +392,7 @@
         focus(element, handler, details, useDispatchToTriggerEvent) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -405,7 +441,7 @@
         }
         val(element, value) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -434,7 +470,7 @@
                 return;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (propValue == null) {
                 return element[propName];
@@ -454,7 +490,7 @@
          * */
         removeAttr(element, attrName) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -472,7 +508,7 @@
          */
         removeClass(element, className) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -493,7 +529,7 @@
          * */
         removeProp(element, propName) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -512,7 +548,7 @@
         replaceWith(element, newElement) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -540,7 +576,7 @@
          * */
         addClass(element, className) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -558,7 +594,7 @@
          * */
         append(element, content) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -581,7 +617,7 @@
          * */
         prepend(element, content) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -604,7 +640,7 @@
          * */
         after(element, content) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -627,7 +663,7 @@
          * */
         before(element, content) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -651,7 +687,7 @@
         remove(target) {
             let DOMUtilsContext = this;
             if (typeof target === "string") {
-                target = document.querySelectorAll(target);
+                target = DOMUtilsCore.document.querySelectorAll(target);
             }
             if (target == null) {
                 return;
@@ -676,7 +712,7 @@
          * */
         empty(element) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -713,7 +749,7 @@
             let DOMUtilsContext = this;
             let args = arguments;
             if (typeof element === "string") {
-                element = document.querySelectorAll(element);
+                element = DOMUtilsCore.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -764,7 +800,7 @@
                     if (_selector_) {
                         /* 存在自定义子元素选择器 */
                         let totalParent = CommonDOMUtils.isWin(elementItem)
-                            ? document.documentElement
+                            ? DOMUtilsCore.document.documentElement
                             : elementItem;
                         if (target.matches(_selector_)) {
                             /* 当前目标可以被selector所匹配到 */
@@ -830,7 +866,7 @@
             }
             let args = arguments;
             if (typeof element === "string") {
-                element = document.querySelectorAll(element);
+                element = DOMUtilsCore.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -914,7 +950,7 @@
          */
         offAll(element, eventType) {
             if (typeof element === "string") {
-                element = document.querySelectorAll(element);
+                element = DOMUtilsCore.document.querySelectorAll(element);
             }
             if (element == null) {
                 return;
@@ -974,7 +1010,7 @@
          */
         trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1032,7 +1068,7 @@
          */
         offset(element) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1040,21 +1076,21 @@
             let rect = element.getBoundingClientRect();
             return {
                 /** y轴偏移 */
-                top: rect.top + globalThis.scrollY,
+                top: rect.top + DOMUtilsCore.globalThis.scrollY,
                 /** x轴偏移 */
-                left: rect.left + globalThis.scrollX,
+                left: rect.left + DOMUtilsCore.globalThis.scrollX,
             };
         }
         width(element, isShow = false) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
             }
             if (CommonDOMUtils.isWin(element)) {
-                return window.document.documentElement.clientWidth;
+                return DOMUtilsCore.window.document.documentElement.clientWidth;
             }
             if (element.nodeType === 9) {
                 /* Document文档节点 */
@@ -1097,10 +1133,10 @@
         height(element, isShow = false) {
             let DOMUtilsContext = this;
             if (CommonDOMUtils.isWin(element)) {
-                return window.document.documentElement.clientHeight;
+                return DOMUtilsCore.window.document.documentElement.clientHeight;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1147,10 +1183,10 @@
         outerWidth(element, isShow = false) {
             let DOMUtilsContext = this;
             if (CommonDOMUtils.isWin(element)) {
-                return window.innerWidth;
+                return DOMUtilsCore.window.innerWidth;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1173,10 +1209,10 @@
         outerHeight(element, isShow = false) {
             let DOMUtilsContext = this;
             if (CommonDOMUtils.isWin(element)) {
-                return window.innerHeight;
+                return DOMUtilsCore.window.innerHeight;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 // @ts-ignore
@@ -1237,7 +1273,7 @@
          */
         animate(element, styles, duration = 1000, callback = null) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1289,14 +1325,14 @@
          */
         wrap(element, wrapperHTML) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
             }
             element = element;
             // 创建一个新的div元素，并将wrapperHTML作为其innerHTML
-            let wrapper = document.createElement("div");
+            let wrapper = DOMUtilsCore.document.createElement("div");
             wrapper.innerHTML = wrapperHTML;
             let wrapperFirstChild = wrapper.firstChild;
             // 将要包裹的元素插入目标元素前面
@@ -1306,7 +1342,7 @@
         }
         prev(element) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1315,7 +1351,7 @@
         }
         next(element) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1328,15 +1364,15 @@
          * let DOMUtils = window.DOMUtils.noConflict()
          */
         noConflict() {
-            if (window.DOMUtils) {
+            if (DOMUtilsCore.window.DOMUtils) {
                 CommonDOMUtils.delete(window, "DOMUtils");
             }
-            window.DOMUtils = this;
+            DOMUtilsCore.window.DOMUtils = this;
             return this;
         }
         siblings(element) {
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1357,7 +1393,7 @@
         parent(element) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1385,7 +1421,7 @@
                 }
             }
             function parseHTMLByCreateDom() {
-                let tempDIV = document.createElement("div");
+                let tempDIV = DOMUtilsCore.document.createElement("div");
                 tempDIV.innerHTML = html;
                 if (isComplete) {
                     return tempDIV;
@@ -1418,7 +1454,7 @@
         hover(element, handler, option) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1441,7 +1477,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = document.querySelectorAll(target);
+                target = DOMUtilsCore.document.querySelectorAll(target);
             }
             if (target instanceof NodeList || target instanceof Array) {
                 target = target;
@@ -1450,6 +1486,7 @@
                 }
             }
             else {
+                target = target;
                 target.style.display = "";
                 if (!CommonDOMUtils.isShow(target)) {
                     /* 仍然是不显示，尝试使用强覆盖 */
@@ -1472,7 +1509,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = document.querySelectorAll(target);
+                target = DOMUtilsCore.document.querySelectorAll(target);
             }
             if (target instanceof NodeList || target instanceof Array) {
                 target = target;
@@ -1481,6 +1518,7 @@
                 }
             }
             else {
+                target = target;
                 target.style.display = "none";
                 if (CommonDOMUtils.isShow(target)) {
                     /* 仍然是显示，尝试使用强覆盖 */
@@ -1509,7 +1547,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = document.querySelector(target);
+                target = DOMUtilsCore.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keyup", null, handler, option);
         }
@@ -1534,7 +1572,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = document.querySelector(target);
+                target = DOMUtilsCore.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keydown", null, handler, option);
         }
@@ -1559,7 +1597,7 @@
                 return;
             }
             if (typeof target === "string") {
-                target = document.querySelector(target);
+                target = DOMUtilsCore.document.querySelector(target);
             }
             DOMUtilsContext.on(target, "keypress", null, handler, option);
         }
@@ -1582,7 +1620,7 @@
                 return;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             element = element;
             element.style.opacity = "0";
@@ -1596,16 +1634,16 @@
                 element = element;
                 element.style.opacity = Math.min(progress / duration, 1).toString();
                 if (progress < duration) {
-                    window.requestAnimationFrame(step);
+                    DOMUtilsCore.window.requestAnimationFrame(step);
                 }
                 else {
                     if (callback && typeof callback === "function") {
                         callback();
                     }
-                    window.cancelAnimationFrame(timer);
+                    DOMUtilsCore.window.cancelAnimationFrame(timer);
                 }
             }
-            timer = window.requestAnimationFrame(step);
+            timer = DOMUtilsCore.window.requestAnimationFrame(step);
         }
         /**
          * 淡出元素
@@ -1626,7 +1664,7 @@
                 return;
             }
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             element = element;
             element.style.opacity = "1";
@@ -1639,17 +1677,17 @@
                 element = element;
                 element.style.opacity = Math.max(1 - progress / duration, 0).toString();
                 if (progress < duration) {
-                    window.requestAnimationFrame(step);
+                    DOMUtilsCore.window.requestAnimationFrame(step);
                 }
                 else {
                     element.style.display = "none";
                     if (typeof callback === "function") {
                         callback();
                     }
-                    window.cancelAnimationFrame(timer);
+                    DOMUtilsCore.window.cancelAnimationFrame(timer);
                 }
             }
-            timer = window.requestAnimationFrame(step);
+            timer = DOMUtilsCore.window.requestAnimationFrame(step);
         }
         /**
          * 切换元素的显示和隐藏状态
@@ -1662,7 +1700,7 @@
         toggle(element) {
             let DOMUtilsContext = this;
             if (typeof element === "string") {
-                element = document.querySelector(element);
+                element = DOMUtilsCore.document.querySelector(element);
             }
             if (element == null) {
                 return;
@@ -1674,6 +1712,14 @@
                 DOMUtilsContext.hide(element);
             }
         }
+        /**
+         * 创建一个新的DOMUtils实例
+         * @param option
+         * @returns
+         */
+        createDOMUtils(option) {
+            return new DOMUtils(option);
+        }
     }
     let domUtils = new DOMUtils();