dom-core.d.ts 6.3 KB

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