1 |
|
2 |
|
3 |
|
4 |
|
5 | import Editor from '../editor/index';
|
6 | declare type OffsetDataType = {
|
7 | top: number;
|
8 | left: number;
|
9 | width: number;
|
10 | height: number;
|
11 | parent: Element | null;
|
12 | };
|
13 | export declare type DomElementSelector = string | DomElement | HTMLElement | Element | Document | HTMLCollection | Node | NodeList | HTMLElement[] | EventTarget | null | undefined;
|
14 | export declare class DomElement<T extends DomElementSelector = DomElementSelector> {
|
15 | selector: T;
|
16 | length: number;
|
17 | elems: HTMLElement[];
|
18 | dataSource: Map<string, any>;
|
19 | |
20 |
|
21 |
|
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 | }
|
238 | declare function $(...arg: ConstructorParameters<typeof DomElement>): DomElement;
|
239 | export default $;
|