@whitesev/domutils 1.6.7 → 1.7.0

package/dist/types/src/{DOMUtils.d.ts → index.d.ts}

@@ -1,14 +1,20 @@
-import { DOMUtilsEvent } from "./DOMUtilsEvent";
 import type { DOMUtilsCreateElementAttributesMap } from "./types/DOMUtilsEvent";
-import { type ParseHTMLReturnType, type DOMUtilsTargetElementType } from "./types/global";
+import { type DOMUtilsTargetElementType } from "./types/global";
 import type { WindowApiOption } from "./types/WindowApi";
-declare class DOMUtils extends DOMUtilsEvent {
+import { ElementHandler } from "./ElementHandler";
+declare class DOMUtils extends ElementHandler {
     constructor(option?: WindowApiOption);
     /** 版本号 */
     version: string;
+    /**
+     * 取消挂载在window下的DOMUtils并返回DOMUtils
+     * @example
+     * let DOMUtils = window.DOMUtils.noConflict()
+     */
+    noConflict(): this;
     /**
      * 获取元素的属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param attrName 属性名
      * @example
      * // 获取a.xx元素的href属性
@@ -16,10 +22,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.attr("a.xx","href");
      * > https://xxxx....
      */
-    attr(element: DOMUtilsTargetElementType | Element, attrName: string): string;
+    attr($el: DOMUtilsTargetElementType | Element, attrName: string): string;
     /**
      * 设置元素的属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param attrName 属性名
      * @param attrValue 属性值
      * @example
@@ -27,7 +33,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.attr(document.querySelector("a.xx"),"href","abcd");
      * DOMUtils.attr("a.xx","href","abcd");
      */
-    attr(element: DOMUtilsTargetElementType | Element, attrName: string, attrValue: string | boolean | number): void;
+    attr($el: DOMUtilsTargetElementType | Element, attrName: string, attrValue: string | boolean | number): void;
     /**
      * 创建元素
      * @param tagName 标签名
@@ -88,7 +94,7 @@ declare class DOMUtils extends DOMUtilsEvent {
     attributes?: DOMUtilsCreateElementAttributesMap): HTMLElement;
     /**
      * 获取元素的样式属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param property 样式属性名或包含多个属性名和属性值的对象
      * @example
      * // 获取元素a.xx的CSS属性display
@@ -96,10 +102,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css("a.xx","display");
      * > "none"
      * */
-    css(element: DOMUtilsTargetElementType, property: keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index"): string;
+    css($el: DOMUtilsTargetElementType, property: keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index"): string;
     /**
      * 获取元素的样式属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param property 样式属性名或包含多个属性名和属性值的对象
      * @example
      * // 获取元素a.xx的CSS属性display
@@ -107,10 +113,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css("a.xx","display");
      * > "none"
      * */
-    css(element: DOMUtilsTargetElementType, property: string): string;
+    css($el: DOMUtilsTargetElementType, property: string): string;
     /**
      * 设置元素的样式属性
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param property 样式属性名或包含多个属性名和属性值的对象
      * @param value 样式属性值
      * @example
@@ -124,10 +130,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
      * DOMUtils.css(document.querySelector("a.xx"),"top",10);
      * */
-    css(element: DOMUtilsTargetElementType, property: (keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index") & string, value: string | number): string;
+    css($el: DOMUtilsTargetElementType, property: (keyof Omit<CSSStyleDeclaration, "zIndex"> | "z-index") & string, value: string | number): string;
     /**
      * 设置元素的样式属性
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param property 样式属性名或包含多个属性名和属性值的对象
      * @param value 样式属性值
      * @example
@@ -139,7 +145,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.css(document.querySelector("a.xx"),{ top: "10px" });
      * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
      * */
-    css(element: DOMUtilsTargetElementType, property: {
+    css($el: DOMUtilsTargetElementType, property: {
         [P in keyof Omit<CSSStyleDeclaration, "zIndex">]?: CSSStyleDeclaration[P];
     } | {
         "z-index": string | number;
@@ -148,7 +154,7 @@ declare class DOMUtils extends DOMUtilsEvent {
     }): string;
     /**
      * 获取元素的文本内容，优先返回textContent
-     * @param element 目标元素
+     * @param $el 目标元素
      * @returns 如果传入了text，则返回undefined；否则返回文本内容
      * @example
      * // 设置元素a.xx的文本内容为abcd
@@ -156,10 +162,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.text("a.xx","abcd")
      * DOMUtils.text("a.xx",document.querySelector("b"))
      * */
-    text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node): string;
+    text($el: DOMUtilsTargetElementType | Element | DocumentFragment | Node): string;
     /**
      * 设置元素的文本内容
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param text （可选）文本内容
      * @returns 如果传入了text，则返回undefined；否则返回文本内容
      * @example
@@ -168,7 +174,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.text("a.xx","abcd")
      * DOMUtils.text("a.xx",document.querySelector("b"))
      * */
-    text(element: DOMUtilsTargetElementType | Element | DocumentFragment | Node, text: string | HTMLElement | Element | number): void;
+    text($el: DOMUtilsTargetElementType | Element | DocumentFragment | Node, text: string | HTMLElement | Element | number): void;
     /**
      * 设置元素的HTML内容
      * @param element 目标元素
@@ -183,7 +189,7 @@ declare class DOMUtils extends DOMUtilsEvent {
     html(element: DOMUtilsTargetElementType, html: string | HTMLElement | Element | number): void;
     /**
      * 获取元素的HTML内容
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param html （可选）HTML内容|元素
      * @returns 如果传入了html，则返回undefined；否则返回HTML内容
      * @example
@@ -192,17 +198,17 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.html("a.xx","<b>abcd</b>")
      * DOMUtils.html("a.xx",document.querySelector("b"))
      * */
-    html(element: DOMUtilsTargetElementType): string;
+    html($el: DOMUtilsTargetElementType): string;
     /**
      * 获取移动元素的transform偏移
      */
-    getTransform(element: HTMLElement, isShow?: boolean): {
+    getTransform($el: HTMLElement, isShow?: boolean): {
         transformLeft: number;
         transformTop: number;
     };
     /**
      * 设置元素的value属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param value （可选）value属性值
      * @returns 如果传入了value，则返回undefined；否则返回value属性值
      * > true
@@ -211,27 +217,27 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.val(document.querySelector("input.xx"),true)
      * DOMUtils.val("input.xx",true)
      * */
-    val(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | string | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, value: string | boolean | number): void;
+    val($el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | string | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, value: string | boolean | number): void;
     /**
      * 获取value属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @example
      * // 获取元素textarea的值
      * DOMUtils.val(document.querySelector("textarea.xx"))
      * */
-    val(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | string | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): string;
+    val($el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | string | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): string;
     /**
      * 获取value属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @example
      * // 获取元素input.xx的复选框值
      * DOMUtils.val(document.querySelector("input.xx"))
      * DOMUtils.val("input.xx")
      * */
-    val(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): boolean | string;
+    val($el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] | NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>): boolean | string;
     /**
      * 获取元素的属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param propName 属性名
      * @param propValue 属性值
      * @example
@@ -240,10 +246,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.val("a.xx","data-value")
      * > undefined
      * */
-    prop<T>(element: DOMUtilsTargetElementType | DocumentFragment, propName: string): T;
+    prop<T>($el: DOMUtilsTargetElementType | DocumentFragment, propName: string): T;
     /**
      * 设置元素的属性值
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param propName 属性名
      * @param propValue 属性值
      * @example
@@ -251,132 +257,122 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.val(document.querySelector("a.xx"),"data-value",1)
      * DOMUtils.val("a.xx","data-value",1)
      * */
-    prop<T>(element: DOMUtilsTargetElementType | DocumentFragment, propName: string, propValue: T): void;
+    prop<T>($el: DOMUtilsTargetElementType | DocumentFragment, propName: string, propValue: T): void;
     /**
      * 移除元素的属性
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param attrName 属性名
      * @example
      * // 移除元素a.xx的属性data-value
      * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
      * DOMUtils.removeAttr("a.xx","data-value")
      * */
-    removeAttr(element: DOMUtilsTargetElementType | Element, attrName: string): void;
+    removeAttr($el: DOMUtilsTargetElementType | Element, attrName: string): void;
     /**
      * 移除元素class名
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param className 类名
      * @example
      * // 移除元素a.xx的className为xx
      * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
      * DOMUtils.removeClass("a.xx","xx")
      */
-    removeClass(element: DOMUtilsTargetElementType | Element, className?: string | string[] | undefined | null): void;
+    removeClass($el: DOMUtilsTargetElementType | Element, className?: string | string[] | undefined | null): void;
     /**
      * 移除元素的属性
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param propName 属性名
      * @example
      * // 移除元素a.xx的href属性
      * DOMUtils.removeProp(document.querySelector("a.xx"),"href")
      * DOMUtils.removeProp("a.xx","href")
      * */
-    removeProp(element: DOMUtilsTargetElementType | DocumentFragment, propName: string): void;
-    /**
-     * 将一个元素替换为另一个元素
-     * @param element 目标元素
-     * @param newElement 新元素
-     * @example
-     * // 替换元素a.xx为b.xx
-     * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
-     * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
-     */
-    replaceWith(element: DOMUtilsTargetElementType, newElement: HTMLElement | string | Node): void;
+    removeProp($el: DOMUtilsTargetElementType | DocumentFragment, propName: string): void;
     /**
      * 给元素添加class
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param className class名
      * @example
      * // 元素a.xx的className添加_vue_
      * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
      * DOMUtils.addClass("a.xx","_vue_")
      * */
-    addClass(element: DOMUtilsTargetElementType | Element, className: string | string[]): void;
+    addClass($el: DOMUtilsTargetElementType | Element, className: string | string[]): void;
     /**
      * 判断元素是否存在className
-     * @param element
+     * @param $el
      * @param className
      */
-    hasClass(element: DOMUtilsTargetElementType | Element, className: string | string[]): boolean;
+    hasClass($el: DOMUtilsTargetElementType | Element, className: string | string[]): boolean;
     /**
      * 函数在元素内部末尾添加子元素或HTML字符串
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param content 子元素或HTML字符串
      * @example
      * // 元素a.xx的内部末尾添加一个元素
      * DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.append("a.xx","'<b class="xx"></b>")
      * */
-    append(element: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void;
+    append($el: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string | (HTMLElement | string | Element)[] | NodeList): void;
     /**
      * 函数 在元素内部开头添加子元素或HTML字符串
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param content 子元素或HTML字符串
      * @example
      * // 元素a.xx内部开头添加一个元素
      * DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.prepend("a.xx","'<b class="xx"></b>")
      * */
-    prepend(element: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string): void;
+    prepend($el: DOMUtilsTargetElementType | DocumentFragment, content: HTMLElement | string): void;
     /**
      * 在元素后面添加兄弟元素或HTML字符串
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param content 兄弟元素或HTML字符串
      * @example
      * // 元素a.xx后面添加一个元素
      * DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.after("a.xx","'<b class="xx"></b>")
      * */
-    after(element: DOMUtilsTargetElementType, content: HTMLElement | string): void;
+    after($el: DOMUtilsTargetElementType, content: HTMLElement | string): void;
     /**
      * 在元素前面添加兄弟元素或HTML字符串
-     * @param element 目标元素
+     * @param $el 目标元素
      * @param content 兄弟元素或HTML字符串
      * @example
      * // 元素a.xx前面添加一个元素
      * DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
      * DOMUtils.before("a.xx","'<b class="xx"></b>")
      * */
-    before(element: DOMUtilsTargetElementType, content: HTMLElement | string): void;
+    before($el: DOMUtilsTargetElementType, content: HTMLElement | string): void;
     /**
      * 移除元素
-     * @param element 目标元素
+     * @param $el 目标元素
      * @example
      * // 元素a.xx前面添加一个元素
      * DOMUtils.remove(document.querySelector("a.xx"))
      * DOMUtils.remove(document.querySelectorAll("a.xx"))
      * DOMUtils.remove("a.xx")
      * */
-    remove(element: DOMUtilsTargetElementType | Element): void;
+    remove($el: DOMUtilsTargetElementType | Element): void;
     /**
      * 移除元素的所有子元素
-     * @param element 目标元素
+     * @param $el 目标元素
      * @example
      * // 移除元素a.xx元素的所有子元素
      * DOMUtils.empty(document.querySelector("a.xx"))
      * DOMUtils.empty("a.xx")
      * */
-    empty(element: DOMUtilsTargetElementType | Element): void;
+    empty($el: DOMUtilsTargetElementType | Element): void;
     /**
      * 获取元素相对于文档的偏移坐标（加上文档的滚动条）
-     * @param element 目标元素
+     * @param $el 目标元素
      * @example
      * // 获取元素a.xx的对于文档的偏移坐标
      * DOMUtils.offset(document.querySelector("a.xx"))
      * DOMUtils.offset("a.xx")
      * > 0
      */
-    offset(element: HTMLElement | string): {
+    offset($el: HTMLElement | string): {
         /** y轴偏移 */
         top: number;
         /** x轴偏移 */
@@ -384,7 +380,7 @@ declare class DOMUtils extends DOMUtilsEvent {
     } | undefined;
     /**
      * 获取元素的宽度
-     * @param element 要获取宽度的元素
+     * @param $el 要获取宽度的元素
      * @param value 宽度值
      * @param isShow 是否已进行isShow，避免爆堆栈
      * @returns 元素的宽度，单位为像素
@@ -401,10 +397,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.width(document.querySelector("a.xx"),200)
      * DOMUtils.width("a.xx",200)
      */
-    width(element: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
+    width($el: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
     /**
      * 获取元素的高度
-     * @param element 要获取高度的元素
+     * @param $el 要获取高度的元素
      * @param isShow 是否已进行isShow，避免爆堆栈
      * @returns 元素的高度，单位为像素
      * @example
@@ -420,10 +416,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.height(document.querySelector("a.xx"),200)
      * DOMUtils.height("a.xx",200)
      */
-    height(element: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
+    height($el: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
     /**
      * 获取元素的外部宽度（包括边框和外边距）
-     * @param element 要获取外部宽度的元素
+     * @param $el 要获取外部宽度的元素
      * @param [isShow=false] 是否已进行isShow，避免爆堆栈
      * @returns 元素的外部宽度，单位为像素
      * @example
@@ -435,10 +431,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.outerWidth(window)
      * > 400
      */
-    outerWidth(element: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
+    outerWidth($el: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
     /**
      * 获取元素的外部高度（包括边框和外边距）
-     * @param {HTMLElement|string} element 要获取外部高度的元素
+     * @param {HTMLElement|string} $el 要获取外部高度的元素
      * @param {boolean} [isShow=false] 是否已进行isShow，避免爆堆栈
      * @returns {number} 元素的外部高度，单位为像素
      * @example
@@ -450,32 +446,29 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.outerHeight(window)
      * > 700
      */
-    outerHeight(element: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
-    /**
-     * 在一定时间内改变元素的样式属性，实现动画效果
-     * @param element 需要进行动画的元素
-     * @param styles 动画结束时元素的样式属性
-     * @param duration 动画持续时间，单位为毫秒
-     * @param callback 动画结束后执行的函数
-     * @example
-     * // 监听元素a.xx的从显示变为隐藏
-     * DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
-     *   console.log("已往上位移100px")
-     * })
+    outerHeight($el: HTMLElement | string | Window | typeof globalThis | Document, isShow?: boolean): number;
+    /**
+     * 将一个元素替换为另一个元素
+     * @param $el 目标元素
+     * @param $newEl 新元素
+     * @example
+     * // 替换元素a.xx为b.xx
+     * DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
+     * DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
      */
-    animate(element: DOMUtilsTargetElementType, styles: CSSStyleDeclaration, duration?: number, callback?: (() => void) | undefined | null): void;
+    replaceWith($el: DOMUtilsTargetElementType, $newEl: HTMLElement | string | Node): void;
     /**
      * 将一个元素包裹在指定的HTML元素中
-     * @param element 要包裹的元素
+     * @param $el 要包裹的元素
      * @param wrapperHTML 要包裹的HTML元素的字符串表示形式
      * @example
      * // 将a.xx元素外面包裹一层div
      * DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
      */
-    wrap(element: DOMUtilsTargetElementType, wrapperHTML: string): void;
+    wrap($el: DOMUtilsTargetElementType, wrapperHTML: string): void;
     /**
      * 获取当前元素的前一个兄弟元素
-     * @param element 当前元素
+     * @param $el 当前元素
      * @returns 前一个兄弟元素
      * @example
      * // 获取a.xx元素前一个兄弟元素
@@ -483,10 +476,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.prev("a.xx")
      * > <div ...>....</div>
      */
-    prev(element: HTMLElement | string): HTMLElement;
+    prev($el: HTMLElement | string): HTMLElement;
     /**
      * 获取当前元素的后一个兄弟元素
-     * @param element 当前元素
+     * @param $el 当前元素
      * @returns 后一个兄弟元素
      * @example
      * // 获取a.xx元素前一个兄弟元素
@@ -494,13 +487,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.next("a.xx")
      * > <div ...>....</div>
      */
-    next(element: HTMLElement | string): HTMLElement;
-    /**
-     * 取消挂载在window下的DOMUtils并返回DOMUtils
-     * @example
-     * let DOMUtils = window.DOMUtils.noConflict()
-     */
-    noConflict(): this;
+    next($el: HTMLElement | string): HTMLElement;
     /**
      * 获取当前元素的所有兄弟元素
      * @param element 当前元素
@@ -514,7 +501,7 @@ declare class DOMUtils extends DOMUtilsEvent {
     siblings(element: HTMLElement | string): HTMLElement[];
     /**
      * 获取当前元素的父元素
-     * @param element 当前元素
+     * @param $el 当前元素
      * @returns 父元素
      * @example
      * // 获取a.xx元素的父元素
@@ -522,10 +509,10 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.parent("a.xx")
      * > <div ...>....</div>
      */
-    parent(element: HTMLElement | string): HTMLElement;
+    parent($el: HTMLElement | string): HTMLElement;
     /**
      * 获取当前元素的父元素
-     * @param element 当前元素
+     * @param $el 当前元素
      * @returns 父元素
      * @example
      * // 获取a.xx元素的父元素
@@ -533,7 +520,7 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.parent("a.xx")
      * > <div ...>....</div>
      */
-    parent(element: HTMLElement[] | NodeList): HTMLElement[];
+    parent($el: HTMLElement[] | NodeList): HTMLElement[];
     /**
      * 将字符串转为Element元素
      * @param html
@@ -547,22 +534,22 @@ declare class DOMUtils extends DOMUtilsEvent {
      * 如果useParser为false，返回一个DIV元素的firstChild
      * @example
      * // 将字符串转为Element元素
-     * DOMUtils.parseHTML("<a href='xxxx'></a>")
+     * DOMUtils.toElement("<a href='xxxx'></a>")
      * > <a href="xxxx"></a>
      * @example
      * // 使用DOMParser将字符串转为Element元素
-     * DOMUtils.parseHTML("<a href='xxxx'></a>",true)
+     * DOMUtils.toElement("<a href='xxxx'></a>",true)
      * > <a href="xxxx"></a>
      * @example
      * // 由于需要转换的元素是多个元素，将字符串转为完整的Element元素
-     * DOMUtils.parseHTML("<a href='xxxx'></a><a href='xxxx'></a>",false, true)
+     * DOMUtils.toElement("<a href='xxxx'></a><a href='xxxx'></a>",false, true)
      * > <div><a href="xxxx"></a><a href='xxxx'></a></div>
      * @example
      * // 由于需要转换的元素是多个元素，使用DOMParser将字符串转为完整的Element元素
-     * DOMUtils.parseHTML("<a href='xxxx'></a><a href='xxxx'></a>",true, true)
+     * DOMUtils.toElement("<a href='xxxx'></a><a href='xxxx'></a>",true, true)
      * > #document
      */
-    parseHTML<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1, isComplete?: T2): ParseHTMLReturnType<T1, T2>;
+    toElement<T1 extends boolean, T2 extends boolean>(html: string, useParser?: T1, isComplete?: T2): T1 extends true ? (T2 extends true ? Document : HTMLElement) : HTMLElement;
     /**
      * 序列化表单元素
      * @param $form 表单元素
@@ -571,72 +558,6 @@ declare class DOMUtils extends DOMUtilsEvent {
      * > xxx=xxx&aaa=
      */
     serialize($form: HTMLFormElement): string;
-    /**
-     * 显示元素
-     * @param target 当前元素
-     * @param checkVisiblie 是否检测元素是否显示
-     * + true （默认）如果检测到还未显示，则强制使用display: unset !important;
-     * + false 不检测，直接设置display属性为空
-     * @example
-     * // 显示a.xx元素
-     * DOMUtils.show(document.querySelector("a.xx"))
-     * DOMUtils.show(document.querySelectorAll("a.xx"))
-     * DOMUtils.show("a.xx")
-     */
-    show(target: DOMUtilsTargetElementType, checkVisiblie?: boolean): void;
-    /**
-     * 隐藏元素
-     * @param target 当前元素
-     * @param checkVisiblie 是否检测元素是否显示
-     * + true （默认）如果检测到显示，则强制使用display: none !important;
-     * + false 不检测，直接设置display属性为none
-     * @example
-     * // 隐藏a.xx元素
-     * DOMUtils.hide(document.querySelector("a.xx"))
-     * DOMUtils.hide(document.querySelectorAll("a.xx"))
-     * DOMUtils.hide("a.xx")
-     */
-    hide(target: DOMUtilsTargetElementType, checkVisiblie?: boolean): void;
-    /**
-     * 淡入元素
-     * @param element 当前元素
-     * @param duration 动画持续时间（毫秒），默认400毫秒
-     * @param callback 动画结束的回调
-     * @example
-     * // 元素a.xx淡入
-     * DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
-     *   console.log("淡入完毕");
-     * })
-     * DOMUtils.fadeIn("a.xx",undefined,()=>{
-     *   console.log("淡入完毕");
-     * })
-     */
-    fadeIn(element: DOMUtilsTargetElementType, duration?: number, callback?: () => void): void;
-    /**
-     * 淡出元素
-     * @param element 当前元素
-     * @param duration 动画持续时间（毫秒），默认400毫秒
-     * @param callback 动画结束的回调
-     * @example
-     * // 元素a.xx淡出
-     * DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
-     *   console.log("淡出完毕");
-     * })
-     * DOMUtils.fadeOut("a.xx",undefined,()=>{
-     *   console.log("淡出完毕");
-     * })
-     */
-    fadeOut(element: DOMUtilsTargetElementType, duration?: number, callback?: () => void): void;
-    /**
-     * 切换元素的显示和隐藏状态
-     * @param element 当前元素
-     * @param checkVisiblie 是否检测元素是否显示
-     * @example
-     * // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
-     * DOMUtils.toggle(document.querySelector("a.xx"))
-     * DOMUtils.toggle("a.xx")
-     */
-    toggle(element: DOMUtilsTargetElementType, checkVisiblie?: boolean): void;
     /**
      * 创建一个新的DOMUtils实例
      * @param option
@@ -652,10 +573,69 @@ declare class DOMUtils extends DOMUtilsEvent {
      * DOMUtils.getTextBoundingRect(document.querySelector("input"));
      */
     getTextBoundingRect($input: HTMLInputElement, selectionStart?: number | string, selectionEnd?: number | string): DOMRect;
-    /** 获取 animationend 在各个浏览器的兼容名 */
-    getAnimationEndNameList(): string[];
-    /** 获取 transitionend 在各个浏览器的兼容名 */
-    getTransitionEndNameList(): string[];
+    /**
+     * 在页面中增加style元素，如果html节点存在子节点，添加子节点第一个，反之，添加到html节点的子节点最后一个
+     * @param cssText css字符串
+     * @returns 返回添加的CSS标签
+     * @example
+     * DOMUtils.addStyle("html{}");
+     * > <style type="text/css">html{}</style>
+     */
+    addStyle(cssText: string): HTMLStyleElement;
+    /**
+     * 检测点击的地方是否在该元素区域内
+     * @param $el 需要检测的元素
+     * @returns
+     * + true 点击在元素上
+     * + false 未点击在元素上
+     * @example
+     * DOMUtils.checkUserClickInNode(document.querySelector(".xxx"));
+     * > false
+     **/
+    checkUserClickInNode($el: Element | Node | HTMLElement): boolean;
+    /**
+     * 删除某个父元素，父元素可能在上层或上上层或上上上层...
+     * @param $el 当前元素
+     * @param parentSelector 判断是否满足父元素，参数为当前处理的父元素，满足返回true，否则false
+     * @returns
+     * + true 已删除
+     * + false 未删除
+     * @example
+     * DOMUtils.deleteParentNode(document.querySelector("a"),".xxx");
+     * > true
+     **/
+    deleteParentNode($el: Node | HTMLElement | Element | null, parentSelector: string): boolean;
+    /**
+     * 定位元素上的字符串，返回一个迭代器
+     * @param $el 目标元素
+     * @param text 需要定位的字符串
+     * @param filter （可选）过滤器函数，返回值为true是排除该元素
+     * @example
+     * let textIterator = DOMUtils.findElementsWithText(document.documentElement,"xxxx");
+     * textIterator.next();
+     * > {value: ?HTMLElement, done: boolean, next: Function}
+     */
+    findElementsWithText<T extends HTMLElement | Element | Node>($el: T, text: string, filter?: (element: T) => boolean): Generator<HTMLElement | ChildNode, void, any>;
+    /**
+     * 寻找可见元素，如果元素不可见，则向上找它的父元素直至找到，如果父元素不存在则返回null
+     * @param $el
+     * @example
+     * let visibleElement = DOMUtils.findVisibleElement(document.querySelector("a.xx"));
+     * > <HTMLElement>
+     */
+    findVisibleElement($el: HTMLElement | Element | Node): HTMLElement | null;
+    /**
+     * 将元素上的文本或元素使用光标进行选中
+     *
+     * 注意，如果设置startIndex和endIndex，且元素上并无可选则的坐标，那么会报错
+     * @param $el 目标元素
+     * @param childTextNode 目标元素下的#text元素
+     * @param startIndex （可选）开始坐标，可为空
+     * @param endIndex （可选）结束坐标，可为空
+     * @example
+     * DOMUtils.setElementSelection(document.querySelector("span"));
+     */
+    setElementSelection($el: HTMLElement | Element | Node, childTextNode?: ChildNode, startIndex?: number, endIndex?: number): void;
 }
 declare const domUtils: DOMUtils;
 export { domUtils as DOMUtils };