UNPKG

5.95 kBTypeScriptView Raw
1/**
2 * @description 封装 DOM 操作
3 * @wangfupeng
4 */
5import Editor from '../editor/index';
6declare type OffsetDataType = {
7 top: number;
8 left: number;
9 width: number;
10 height: number;
11 parent: Element | null;
12};
13export declare type DomElementSelector = string | DomElement | HTMLElement | Element | Document | HTMLCollection | Node | NodeList | HTMLElement[] | EventTarget | null | undefined;
14export declare class DomElement<T extends DomElementSelector = DomElementSelector> {
15 selector: T;
16 length: number;
17 elems: HTMLElement[];
18 dataSource: Map<string, any>;
19 /**
20 * 构造函数
21 * @param selector 任一类型的选择器
22 */
23 constructor(selector: T);
24 /**
25 * 获取元素 id
26 */
27 get id(): string;
28 /**
29 * 遍历所有元素,执行回调函数
30 * @param fn 回调函数
31 */
32 forEach(fn: (ele: HTMLElement, index?: number) => boolean | unknown): DomElement;
33 /**
34 * 克隆元素
35 * @param deep 是否深度克隆
36 */
37 clone(deep?: boolean): DomElement;
38 /**
39 * 获取第几个元素
40 * @param index index
41 */
42 get(index?: number): DomElement;
43 /**
44 * 获取第一个元素
45 */
46 first(): DomElement;
47 /**
48 * 获取最后一个元素
49 */
50 last(): DomElement;
51 /**
52 * 绑定事件
53 * @param type 事件类型
54 * @param selector DOM 选择器
55 * @param fn 事件函数
56 */
57 on(type: string, fn: Function): DomElement;
58 on(type: string, selector: string, fn: Function): DomElement;
59 /**
60 * 解绑事件
61 * @param type 事件类型
62 * @param selector DOM 选择器
63 * @param fn 事件函数
64 */
65 off(type: string, fn: Function): DomElement;
66 off(type: string, selector: string, fn: Function): DomElement;
67 /**
68 * 设置/获取 属性
69 * @param key key
70 * @param val value
71 */
72 attr(key: string): string;
73 attr(key: string, val: string): DomElement;
74 /**
75 * 删除 属性
76 * @param key key
77 */
78 removeAttr(key: string): void;
79 /**
80 * 添加 css class
81 * @param className css class
82 */
83 addClass(className?: string): DomElement;
84 /**
85 * 添加 css class
86 * @param className css class
87 */
88 removeClass(className?: string): DomElement;
89 /**
90 * 是否有传入的 css class
91 * @param className css class
92 */
93 hasClass(className?: string): boolean;
94 /**
95 * 修改 css
96 * @param key css key
97 * @param val css value
98 */
99 css(key: string, val?: string | number): DomElement;
100 /**
101 * 封装 getBoundingClientRect
102 */
103 getBoundingClientRect(): DOMRect;
104 /**
105 * 显示
106 */
107 show(): DomElement;
108 /**
109 * 隐藏
110 */
111 hide(): DomElement;
112 /**
113 * 获取子节点(只有 DOM 元素)
114 */
115 children(): DomElement | null;
116 /**
117 * 获取子节点(包括文本节点)
118 */
119 childNodes(): DomElement | null;
120 /**
121 * 将子元素全部替换
122 * @param $children 新的child节点
123 */
124 replaceChildAll($children: DomElement): void;
125 /**
126 * 增加子节点
127 * @param $children 子节点
128 */
129 append($children: DomElement): DomElement;
130 /**
131 * 移除当前节点
132 */
133 remove(): DomElement;
134 /**
135 * 当前元素,是否包含某个子元素
136 * @param $child 子元素
137 */
138 isContain($child: DomElement): boolean;
139 /**
140 * 获取当前元素的尺寸和位置信息
141 */
142 getSizeData(): DOMRect;
143 /**
144 * 获取当前元素 nodeName
145 */
146 getNodeName(): string;
147 /**
148 * 获取当前元素节点
149 */
150 getNode(): Node;
151 /**
152 * 获取当前元素可视高度
153 */
154 getClientHeight(): number;
155 /**
156 * 获取当前元素可视宽度
157 */
158 /**
159 * 查询
160 * @param selector css 选择器
161 */
162 find(selector: string): DomElement;
163 /**
164 * 获取/设置 元素 text
165 * @param val text 值
166 */
167 text(): string;
168 text(val: string): DomElement;
169 /**
170 * 设置/获取 元素 html
171 * @param val html 值
172 */
173 html(): string;
174 html(val: string): DomElement;
175 /**
176 * 获取元素 value
177 */
178 val(): string;
179 /**
180 * focus 到当前元素
181 */
182 focus(): DomElement;
183 /**
184 * 当前元素前一个兄弟节点
185 */
186 prev(): DomElement;
187 /**
188 * 当前元素后一个兄弟节点
189 */
190 next(): DomElement;
191 /**
192 * 获取父元素
193 */
194 parent(): DomElement;
195 /**
196 * 查找父元素,知道满足 selector 条件
197 * @param selector css 选择器
198 * @param curElem 从哪个元素开始查找,默认为当前元素
199 */
200 parentUntil(selector: string, curElem?: HTMLElement): DomElement | null;
201 /**
202 * 判读是否相等
203 * @param $elem 元素
204 */
205 equal($elem: DomElement | HTMLElement): boolean;
206 /**
207 * 将该元素插入到某个元素前面
208 * @param selector css 选择器
209 */
210 insertBefore(selector: string | DomElement): DomElement;
211 /**
212 * 将该元素插入到某个元素后面
213 * @param selector css 选择器
214 */
215 insertAfter(selector: string | DomElement): DomElement;
216 /**
217 * 设置/获取 数据
218 * @param key key
219 * @param value value
220 */
221 data<T>(key: string, value?: T): T | undefined;
222 /**
223 * 获取当前节点的顶级(段落)
224 * @param editor 富文本实例
225 */
226 getNodeTop(editor: Editor): DomElement;
227 /**
228 * 获取当前 节点 基与上一个拥有相对或者解决定位的父容器的位置
229 * @param editor 富文本实例
230 */
231 getOffsetData(): OffsetDataType;
232 /**
233 * 从上至下进行滚动
234 * @param top 滚动的值
235 */
236 scrollTop(top: number): void;
237}
238declare function $(...arg: ConstructorParameters<typeof DomElement>): DomElement;
239export default $;