@whitesev/domutils 2.0.5 → 2.0.7

package/dist/types/src/index.d.ts

@@ -351,7 +351,7 @@ declare class DOMUtils extends ElementHandler {
      * */
     before($el: DOMUtilsTargetElementType, ...args: (HTMLElement | string | Element | DocumentFragment | (HTMLElement | string | Element | DocumentFragment)[] | NodeList)[]): void;
     /**
-     * 移除元素
+     * 移除元素（包括它和内部使用.on添加的监听事件）
      * @param $el 目标元素，可以是数组、单个元素、NodeList、元素选择器
      * @example
      * DOMUtils.remove(document.querySelector("a.xx"))
@@ -359,7 +359,7 @@ declare class DOMUtils extends ElementHandler {
      * DOMUtils.remove("a.xx")
      * DOMUtils.remove([a.xxx, div.xxx, span.xxx])
      * */
-    remove($el: DOMUtilsTargetElementType | Element): void;
+    remove($el: DOMUtilsTargetElementType | Element | null | undefined): void;
     /**
      * 移除元素内所有的子元素
      * @param $el 目标元素

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "适合在浏览器中操作DOM的常用工具类",
   "keywords": [
     "typescript",

package/src/CommonUtils.ts

@@ -15,7 +15,7 @@ export const CommonUtils = {
    * 判断元素是否已显示或已连接
    * @param $el
    */
-  isShow($el: HTMLElement) {
+  isShow($el: Element) {
     return Boolean($el.getClientRects().length);
   },
   /**
@@ -37,7 +37,7 @@ export const CommonUtils = {
    * @param $el 元素
    * @param text 文本
    */
-  setSafeHTML($el: HTMLElement, text: string) {
+  setSafeHTML($el: Element, text: string) {
     // 创建 TrustedHTML 策略（需 CSP 允许）
     $el.innerHTML = this.createSafeHTML(text);
   },
@@ -45,16 +45,16 @@ export const CommonUtils = {
    * 用于强制显示元素并获取它的高度宽度等其它属性
    * @param $el
    */
-  forceShow($el: HTMLElement) {
-    const dupNode = $el.cloneNode(true) as HTMLElement;
-    dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
-    this.windowApi.document.documentElement.appendChild(dupNode);
+  forceShow($el: Element) {
+    const $clone = $el.cloneNode(true) as HTMLElement;
+    $clone.setAttribute("style", "visibility: hidden !important;display:block !important;");
+    this.windowApi.document.documentElement.appendChild($clone);
     return {
       /**
        * 恢复修改的style
        */
       recovery() {
-        dupNode.remove();
+        $clone.remove();
       },
     };
   },
@@ -63,7 +63,7 @@ export const CommonUtils = {
    * @param element
    * @param styleName style名
    */
-  getStyleValue(element: HTMLElement | CSSStyleDeclaration, styleName: string) {
+  getStyleValue(element: Element | CSSStyleDeclaration, styleName: string) {
     let view = null;
     let styles = null;
     if (element instanceof CSSStyleDeclaration) {
@@ -85,37 +85,37 @@ export const CommonUtils = {
   },
   /**
    * 判断是否是window，例如window、self、globalThis
-   * @param target
+   * @param obj
    */
-  isWin(target: any) {
-    if (typeof target !== "object") {
+  isWin(obj: any) {
+    if (typeof obj !== "object") {
       return false;
     }
-    if (target instanceof Node) {
+    if (obj instanceof Node) {
       return false;
     }
-    if (target === globalThis) {
+    if (obj === globalThis) {
       return true;
     }
-    if (target === window) {
+    if (obj === window) {
       return true;
     }
-    if (target === self) {
+    if (obj === self) {
       return true;
     }
-    if (target === globalThis) {
+    if (obj === globalThis) {
       return true;
     }
-    if (target === window) {
+    if (obj === window) {
       return true;
     }
-    if (target === self) {
+    if (obj === self) {
       return true;
     }
-    if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
+    if (typeof unsafeWindow !== "undefined" && obj === unsafeWindow) {
       return true;
     }
-    if (target?.Math?.toString() !== "[object Math]") {
+    if (obj?.Math?.toString() !== "[object Math]") {
       return false;
     }
     return true;
@@ -135,22 +135,22 @@ export const CommonUtils = {
   },
   /**
    * 删除对象上的属性
-   * @param target
+   * @param obj
    * @param propName
    */
-  delete(target: any, propName: any) {
+  delete(obj: any, propName: any) {
     if (typeof Reflect === "object" && Reflect != null && Reflect.deleteProperty) {
-      return Reflect.deleteProperty(target, propName);
+      return Reflect.deleteProperty(obj, propName);
     } else {
-      delete target[propName];
+      delete obj[propName];
     }
   },
   /**
    * 判断是否是元素列表
-   * @param $ele
+   * @param $el
    */
-  isNodeList($ele: any): $ele is any[] | NodeList {
-    return Array.isArray($ele) || $ele instanceof NodeList;
+  isNodeList($el: any): $el is any[] | NodeList {
+    return Array.isArray($el) || $el instanceof NodeList;
   },
   /** 获取 animationend 在各个浏览器的兼容名 */
   getAnimationEndNameList() {

package/src/ElementEvent.ts

@@ -631,19 +631,19 @@ class ElementEvent extends ElementAnimate {
   /**
    * 取消绑定所有的事件
    * @param element 需要取消绑定的元素|元素数组
-   * @param eventType （可选）需要取消监听的事件
+   * @param eventType （可选）需要取消监听的事件，不传入该参数则遍历所有监听的事件
    */
   offAll(element: DOMUtilsElementEventType, eventType?: string): void;
   /**
    * 取消绑定所有的事件
    * @param element 需要取消绑定的元素|元素数组
-   * @param eventType （可选）需要取消监听的事件
+   * @param eventType （可选）需要取消监听的事件，不传入该参数则遍历所有监听的事件
    */
   offAll(element: DOMUtilsElementEventType, eventType?: DOMUtils_EventType | DOMUtils_EventType[]): void;
   /**
    * 取消绑定所有的事件
    * @param element 需要取消绑定的元素|元素数组
-   * @param eventType （可选）需要取消监听的事件
+   * @param eventType （可选）需要取消监听的事件，不传入该参数则遍历所有监听的事件
    */
   offAll(element: DOMUtilsElementEventType, eventType?: DOMUtils_EventType | DOMUtils_EventType[] | string) {
     const that = this;

package/src/index.ts

@@ -1059,7 +1059,7 @@ class DOMUtils extends ElementHandler {
     handler($el, $fragment);
   }
   /**
-   * 移除元素
+   * 移除元素（包括它和内部使用.on添加的监听事件）
    * @param $el 目标元素，可以是数组、单个元素、NodeList、元素选择器
    * @example
    * DOMUtils.remove(document.querySelector("a.xx"))
@@ -1067,20 +1067,25 @@ class DOMUtils extends ElementHandler {
    * DOMUtils.remove("a.xx")
    * DOMUtils.remove([a.xxx, div.xxx, span.xxx])
    * */
-  remove($el: DOMUtilsTargetElementType | Element) {
-    const that = this;
+  remove($el: DOMUtilsTargetElementType | Element | null | undefined) {
     if (typeof $el === "string") {
-      $el = that.selectorAll($el);
+      $el = this.selectorAll($el);
     }
     if ($el == null) {
       return;
     }
     if (CommonUtils.isNodeList($el)) {
       $el.forEach(($elItem) => {
-        that.remove($elItem as HTMLElement);
+        this.remove($elItem as HTMLElement);
       });
       return;
     }
+    // 移除事件
+    $el.querySelectorAll("*").forEach(($elItem) => {
+      if (!($elItem instanceof Element)) return;
+      this.offAll($elItem);
+    });
+    this.offAll($el);
     if (typeof $el.remove === "function") {
       $el.remove();
     } else if ($el.parentElement) {
@@ -1113,7 +1118,7 @@ class DOMUtils extends ElementHandler {
       return;
     }
     if ($el.innerHTML) {
-      $el.innerHTML = "";
+      CommonUtils.setSafeHTML($el, "");
     } else if ($el.textContent) {
       $el.textContent = "";
     }
@@ -1392,7 +1397,7 @@ class DOMUtils extends ElementHandler {
       $parent.replaceChild($newEl as Node, $el);
     } else {
       that.after($el, $newEl as HTMLElement);
-      $el.remove();
+      this.remove($el);
     }
   }
   /**