@whitesev/domutils 1.6.8 → 1.7.1

package/dist/types/src/{DOMUtilsEvent.d.ts → ElementEvent.d.ts}

@@ -1,10 +1,15 @@
-import type { DOMUtils_Event, DOMUtils_EventType, DOMUtilsElementEventType, DOMUtilsEventListenerOption, DOMUtilsEventListenerOptionsAttribute } from "./types/DOMUtilsEvent";
+import { ElementAnimate } from "./ElementAnimate";
+import type { DOMUtils_Event, DOMUtils_EventType, DOMUtilsAddEventListenerResult, DOMUtilsElementEventType, DOMUtilsEventListenerOption, DOMUtilsEventListenerOptionsAttribute } from "./types/DOMUtilsEvent";
 import type { DOMUtilsTargetElementType } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
 import { WindowApi } from "./WindowApi";
-export declare class DOMUtilsEvent {
+declare class ElementEvent extends ElementAnimate {
     windowApi: typeof WindowApi.prototype;
     constructor(windowApiOption?: WindowApiOption);
+    /** 获取 animationend 在各个浏览器的兼容名 */
+    getAnimationEndNameList(): string[];
+    /** 获取 transitionend 在各个浏览器的兼容名 */
+    getTransitionEndNameList(): string[];
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -23,7 +28,7 @@ export declare class DOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: DOMUtils_Event[T]) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], callback: (this: HTMLElement, event: DOMUtils_Event[T]) => void, option?: DOMUtilsEventListenerOption | boolean): DOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -42,7 +47,7 @@ export declare class DOMUtilsEvent {
      *    console.log("事件触发",event)
      * })
      */
-    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], callback: (this: HTMLElement, event: T) => void, option?: DOMUtilsEventListenerOption | boolean): DOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -67,7 +72,7 @@ export declare class DOMUtilsEvent {
      *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends DOMUtils_EventType>(element: DOMUtilsElementEventType, eventType: T | T[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: DOMUtils_Event[T], selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): DOMUtilsAddEventListenerResult;
     /**
      * 绑定事件
      * @param element 需要绑定的元素|元素数组|window
@@ -92,7 +97,7 @@ export declare class DOMUtilsEvent {
      *    console.log("事件触发", event, selectorTarget)
      * })
      */
-    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): void;
+    on<T extends Event>(element: DOMUtilsElementEventType, eventType: string | string[], selector: string | string[] | undefined | null, callback: (this: HTMLElement, event: T, selectorTarget: HTMLElement) => void, option?: DOMUtilsEventListenerOption | boolean): DOMUtilsAddEventListenerResult;
     /**
      * 取消绑定事件
      * @param element 需要取消绑定的元素|元素数组
@@ -177,7 +182,7 @@ export declare class DOMUtilsEvent {
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
+     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
      * @example
      * // 触发元素a.xx的click事件
      * DOMUtils.trigger(document.querySelector("a.xx"),"click")
@@ -186,13 +191,13 @@ export declare class DOMUtilsEvent {
      * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.trigger("a.xx",["click","tap","hover"])
      */
-    trigger(element: DOMUtilsTargetElementType | Element | DocumentFragment | any[] | typeof globalThis | Window | Document, eventType: string, details?: object, useDispatchToTriggerEvent?: boolean): void;
+    trigger(element: DOMUtilsTargetElementType | Element | DocumentFragment | any[] | typeof globalThis | Window | Document, eventType: string | string[], details?: object, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 主动触发事件
      * @param element 需要触发的元素|元素数组|window
      * @param eventType 需要触发的事件
      * @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
-     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true
+     * @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件，默认true，如果为false，则直接调用callback，但是这种会让使用了selectorTarget的没有值
      * @example
      * // 触发元素a.xx的click事件
      * DOMUtils.trigger(document.querySelector("a.xx"),"click")
@@ -201,7 +206,7 @@ export declare class DOMUtilsEvent {
      * DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
      * DOMUtils.trigger("a.xx",["click","tap","hover"])
      */
-    trigger(element: HTMLElement | string | NodeList | any[] | Window | Document, eventType: DOMUtils_EventType | DOMUtils_EventType[], details?: object, useDispatchToTriggerEvent?: boolean): void;
+    trigger(element: Element | string | NodeList | any[] | Window | Document, eventType: DOMUtils_EventType | DOMUtils_EventType[], details?: object, useDispatchToTriggerEvent?: boolean): void;
     /**
      * 绑定或触发元素的click事件
      * @param element 目标元素
@@ -395,91 +400,21 @@ export declare class DOMUtilsEvent {
         removeListen(): void;
     };
     /**
-     * 选择器，可使用以下的额外语法
-     *
-     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-     * @param selector 选择器
-     * @param parent 指定父元素
+     * 阻止事件传递
+     * @param event 要阻止传递的事件
      * @example
-     * DOMUtils.selector("div:contains('测试')")
-     * > div.xxx
-     * @example
-     * DOMUtils.selector("div:empty")
-     * > div.xxx
-     * @example
-     * DOMUtils.selector("div:regexp('^xxxx$')")
-     * > div.xxx
+     * DOMUtils.preventEvent(event);
      */
-    selector<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K] | undefined;
-    selector<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E | undefined;
+    preventEvent(event: Event): boolean;
     /**
-     * 选择器，可使用以下的额外语法
-     *
-     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-     * @param selector 选择器
-     * @param parent 指定父元素
-     * @example
-     * DOMUtils.selectorAll("div:contains('测试')")
-     * > [div.xxx]
-     * @example
-     * DOMUtils.selectorAll("div:empty")
-     * > [div.xxx]
-     * @example
-     * DOMUtils.selectorAll("div:regexp('^xxxx$')")
-     * > [div.xxx]
-     * @example
-     * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
-     * > [div.xxx]
-     */
-    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K][];
-    selectorAll<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E[];
-    /**
-     * 匹配元素，可使用以下的额外语法
-     *
-     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-     * @param $el 元素
-     * @param selector 选择器
-     * @example
-     * DOMUtils.matches("div:contains('测试')")
-     * > true
-     * @example
-     * DOMUtils.matches("div:empty")
-     * > true
-     * @example
-     * DOMUtils.matches("div:regexp('^xxxx$')")
-     * > true
-     * @example
-     * DOMUtils.matches("div:regexp(/^xxx/ig)")
-     * > false
-     */
-    matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
-    /**
-     * 根据选择器获取上层元素，可使用以下的额外语法
-     *
-     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
-     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
-     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
-     * @param $el 元素
-     * @param selector 选择器
-     * @example
-     * DOMUtils.closest("div:contains('测试')")
-     * > div.xxx
-     * @example
-     * DOMUtils.closest("div:empty")
-     * > div.xxx
-     * @example
-     * DOMUtils.closest("div:regexp('^xxxx$')")
-     * > div.xxxx
+     * 通过监听事件来主动阻止事件的传递
+     * @param $el 要进行处理的元素
+     * @param eventNameList （可选）要阻止的事件名|列表
+     * @param capture （可选）是否捕获，默认false
      * @example
-     * DOMUtils.closest("div:regexp(/^xxx/ig)")
-     * > null
+     * DOMUtils.preventEvent(document.querySelector("a"),"click")
      */
-    closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
-    closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
+    preventEvent($el: HTMLElement, eventNameList?: string | string[], capture?: boolean): void;
 }
+declare const elementEvent: ElementEvent;
+export { elementEvent, ElementEvent };

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

@@ -0,0 +1,17 @@
+import { ElementEvent } from "./ElementEvent";
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
+declare class ElementHandler extends ElementEvent {
+    windowApi: typeof WindowApi.prototype;
+    constructor(windowApiOption?: WindowApiOption);
+    /**
+     * 获取元素的选择器字符串
+     * @param $el
+     * @example
+     * DOMUtils.getElementSelector(document.querySelector("a"))
+     * > '.....'
+     */
+    getElementSelector($el: HTMLElement): string;
+}
+declare const elementHandler: ElementHandler;
+export { elementHandler, ElementHandler };

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

@@ -0,0 +1,96 @@
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
+declare class ElementSelector {
+    windowApi: typeof WindowApi.prototype;
+    constructor(windowApiOption?: WindowApiOption);
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @param parent 指定父元素
+     * @example
+     * DOMUtils.selector("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.selector("div:regexp('^xxxx$')")
+     * > div.xxx
+     */
+    selector<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K] | undefined;
+    selector<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E | undefined;
+    /**
+     * 选择器，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param selector 选择器
+     * @param parent 指定父元素
+     * @example
+     * DOMUtils.selectorAll("div:contains('测试')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:empty")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp('^xxxx$')")
+     * > [div.xxx]
+     * @example
+     * DOMUtils.selectorAll("div:regexp(/^xxx/ig)")
+     * > [div.xxx]
+     */
+    selectorAll<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Element | Document | DocumentFragment | ShadowRoot): HTMLElementTagNameMap[K][];
+    selectorAll<E extends Element = HTMLElement>(selector: string, parent?: Element | Document | DocumentFragment | ShadowRoot): E[];
+    /**
+     * 匹配元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.matches("div:contains('测试')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:empty")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp('^xxxx$')")
+     * > true
+     * @example
+     * DOMUtils.matches("div:regexp(/^xxx/ig)")
+     * > false
+     */
+    matches($el: HTMLElement | Element | null | undefined, selector: string): boolean;
+    /**
+     * 根据选择器获取上层元素，可使用以下的额外语法
+     *
+     * + :contains([text]) 作用: 找到包含指定文本内容的指定元素
+     * + :empty 作用:找到既没有文本内容也没有子元素的指定元素
+     * + :regexp([text]) 作用: 找到符合正则表达式的内容的指定元素
+     * @param $el 元素
+     * @param selector 选择器
+     * @example
+     * DOMUtils.closest("div:contains('测试')")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:empty")
+     * > div.xxx
+     * @example
+     * DOMUtils.closest("div:regexp('^xxxx$')")
+     * > div.xxxx
+     * @example
+     * DOMUtils.closest("div:regexp(/^xxx/ig)")
+     * > null
+     */
+    closest<K extends keyof HTMLElementTagNameMap>($el: HTMLElement | Element, selector: string): HTMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>($el: HTMLElement | Element, selector: string): E | null;
+}
+declare const elementSelector: ElementSelector;
+export { elementSelector, ElementSelector };

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

@@ -0,0 +1,278 @@
+import { ElementSelector } from "./ElementSelector";
+import type { WindowApiOption } from "./types/WindowApi";
+import { WindowApi } from "./WindowApi";
+declare class ElementWait extends ElementSelector {
+    windowApi: typeof WindowApi.prototype;
+    constructor(windowApiOption?: WindowApiOption);
+    /**
+     * 等待任意事件成立
+     *
+     * 运行方式为根据页面元素的改变而触发回调
+     * @param checkFn 检测的函数
+     * @param timeout 超时时间，默认0
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.wait(()=> {
+     *   let $test = document.querySelector("#test");
+     *   return {
+     *     success: $test !== null,
+     *     data:  $test
+     *   }
+     * })
+     */
+    wait<T>(checkFn: (...args: any[]) => {
+        /**
+         * 是否检测成功
+         */
+        success: boolean;
+        /**
+         * 返回的值
+         */
+        data: T;
+    }, timeout?: null | undefined, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    wait<T>(checkFn: (...args: any[]) => {
+        /**
+         * 是否检测成功
+         */
+        success: boolean;
+        /**
+         * 返回的值
+         */
+        data: T;
+    }, timeout?: number, parent?: Node | Element | Document | HTMLElement): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorFn 获取元素的函数
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(()=>document.querySelector("div"), 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K>(selectorFn: () => K | null | undefined): Promise<K>;
+    waitNode<K>(selectorFn: () => K | null | undefined, timeout: number): Promise<K | null | undefined>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.waitNode("div").then( $div =>{
+     *  console.log($div); // div => HTMLDivELement
+     * })
+     * Utils.waitNode("div", document).then( $div =>{
+     *  console.log($div); // div => HTMLDivELement
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K]>;
+    waitNode<T extends Element>(selector: string, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）父元素，默认document
+     * @example
+     * Utils.waitNode(["div"]).then( ([$div]) =>{
+     *  console.log($div); // div => HTMLDivELement[]
+     * })
+     * Utils.waitNode(["div"], document).then( ([$div]) =>{
+     *  console.log($div); // div => HTMLDivELement[]
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K][]>;
+    waitNode<T extends Element[]>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode("div", document, 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element>(selector: string, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(["div"], document, 1000).then( ([$div]) =>{
+     *  console.log($div); // $div => HTMLDivELement[] | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element[]>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selector CSS选择器
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode("div", 1000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selector: K, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element>(selector: string, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNode(["div"], 1000).then( [$div] =>{
+     *  console.log($div); // $div => HTMLDivELement[] | null
+     * })
+     */
+    waitNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitNode<T extends Element[]>(selectorList: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitAnyNode(["div","div"]).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement 这里是第一个
+     * })
+     * Utils.waitAnyNode(["a","div"], document).then( $a =>{
+     *  console.log($a); // $a => HTMLAnchorElement 这里是第一个
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<HTMLElementTagNameMap[K]>;
+    waitAnyNode<T extends Element>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNode(["div","div"], document, 10000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitAnyNode<T extends Element>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNode(["div","div"], 10000).then( $div =>{
+     *  console.log($div); // $div => HTMLDivELement | null
+     * })
+     */
+    waitAnyNode<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<HTMLElementTagNameMap[K] | null>;
+    waitAnyNode<T extends Element>(selectorList: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitNodeList("div").then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     * Utils.waitNodeList("div", document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     */
+    waitNodeList<T extends keyof HTMLElementTagNameMap>(selector: T, parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[T]>>;
+    waitNodeList<T extends NodeListOf<Element>>(selector: string, parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitNodeList(["div"]).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
+     * })
+     * Utils.waitNodeList(["div"], document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[]
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[K]>[]>;
+    waitNodeList<T extends NodeListOf<Element>[]>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<T>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器
+     * @param parent 监听的父元素
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList("div", document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitNodeList<T extends NodeListOf<Element>>(selector: string, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selector: K, parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent 监听的父元素
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList(["div"], document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]>[] | null>;
+    waitNodeList<T extends NodeListOf<Element>[]>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selector CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList("div", 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selector: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitNodeList<T extends NodeListOf<Element>>(selector: string[], timeout: number): Promise<T | null>;
+    /**
+     * 等待元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitNodeList(["div"], 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>[] | null
+     * })
+     */
+    waitNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]>[] | null>;
+    waitNodeList<T extends NodeListOf<Element>>(selectorList: string[], timeout: number): Promise<T[] | null>;
+    /**
+     * 等待任意元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent （可选）监听的父元素
+     * @example
+     * Utils.waitAnyNodeList(["div","a"]).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     * Utils.waitAnyNodeList(["div","a"], document).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement>
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<HTMLElementTagNameMap[K]>>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], parent?: Node | Element | Document | HTMLElement): Promise<NodeListOf<T>>;
+    /**
+     * 等待任意元素数组出现
+     * @param selectorList CSS选择器数组
+     * @param parent 父元素，默认document
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNodeList(["div","a"], document, 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], parent: Node | Element | Document | HTMLElement, timeout: number): Promise<NodeListOf<T> | null>;
+    /**
+     * 等待任意元素出现
+     * @param selectorList CSS选择器数组
+     * @param timeout 超时时间，默认0
+     * @example
+     * Utils.waitAnyNodeList(["div","div"], 10000).then( $result =>{
+     *  console.log($result); // $result => NodeListOf<HTMLDivElement> | null
+     * })
+     */
+    waitAnyNodeList<K extends keyof HTMLElementTagNameMap>(selectorList: K[], timeout: number): Promise<NodeListOf<HTMLElementTagNameMap[K]> | null>;
+    waitAnyNodeList<T extends Element>(selectorList: string[], timeout: number): Promise<NodeListOf<T> | null>;
+}
+declare const elementWait: ElementWait;
+export { elementWait, ElementWait };

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

@@ -0,0 +1,4 @@
+export declare const GlobalData: {
+    /** .on添加在元素存储的事件 */
+    domEventSymbol: symbol;
+};

package/dist/types/src/{DOMUtilsOriginPrototype.d.ts → OriginPrototype.d.ts}

@@ -1,6 +1,5 @@
-declare const OriginPrototype: {
+export declare const OriginPrototype: {
     Object: {
         defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;
     };
 };
-export { OriginPrototype };

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

@@ -0,0 +1,68 @@
+import type { WindowApiOption } from "./types/WindowApi";
+declare class Utils {
+    private windowApi;
+    constructor(option?: WindowApiOption);
+    /**
+     * 判断对象是否是jQuery对象
+     * @param target
+     * @returns
+     * + true 是jQuery对象
+     * + false 不是jQuery对象
+     * @example
+     * Utils.isJQuery($("a"))
+     * > true
+     */
+    isJQuery(target: any): boolean;
+    /**
+       * JSON数据从源端替换到目标端中，如果目标端存在该数据则替换，不添加，返回结果为目标端替换完毕的结果
+       * @param target 目标数据
+       * @param source 源数据
+       * @param isAdd 是否可以追加键，默认false
+       * @example
+       * Utils.assign({"1":1,"2":{"3":3}}, {"2":{"3":4}});
+       * >
+       * {
+              "1": 1,
+              "2": {
+                  "3": 4
+              }
+          }
+       */
+    assign<T1, T2 extends object, T3 extends boolean>(target: T1, source: T2, isAdd?: T3): T3 extends true ? T1 & T2 : T1;
+    /**
+     * 监听页面元素改变并处理
+     * @param target 需要监听的元素，如果不存在，可以等待它出现
+     * @param observer_config MutationObserver的配置
+     * @example
+      Utils.mutationObserver(document.querySelector("div.xxxx"),{
+        "callback":(mutations, observer)=>{},
+        "config":{childList:true,attributes:true}
+      });
+      * @example
+      Utils.mutationObserver(document.querySelectorAll("div.xxxx"),{
+        "callback":(mutations, observer)=>{},
+        "config":{childList:true,attributes:true}}
+      );
+      * @example
+      Utils.mutationObserver($("div.xxxx"),{
+      "callback":(mutations, observer)=>{},
+      "config":{childList:true,attributes:true}}
+      );
+      **/
+    mutationObserver(target: HTMLElement | Node | NodeList | Document, observer_config: {
+        /**
+         * observer的配置
+         */
+        config?: MutationObserverInit;
+        /**
+         * 是否主动触发一次
+         */
+        immediate?: boolean;
+        /**
+         * 触发的回调函数
+         */
+        callback: MutationCallback;
+    }): MutationObserver;
+}
+declare const utils: Utils;
+export { utils, Utils };