850 lines
15 KiB
Markdown
850 lines
15 KiB
Markdown
# NodeInterface
|
||
|
||
在 DOM 的 `Node` 节点上进行扩展
|
||
|
||
类型：`NodeInterface`
|
||
|
||
## 创建 `NodeInterface` 对象
|
||
|
||
使用引擎内提供的 `$` 节点选择器来实例化 `NodeInterface` 对象
|
||
|
||
```ts
|
||
import { $ } from '@aomao/engine';
|
||
//使用CSS选择器查找节点
|
||
const content = $('.content');
|
||
//创建节点
|
||
const div = $('<div></div>');
|
||
document.body.append(div[0]);
|
||
//转换
|
||
const p = $(document.querySelector('p'));
|
||
const target = $(event.target);
|
||
```
|
||
|
||
## 属性
|
||
|
||
### `length`
|
||
|
||
Node 节点集合长度
|
||
|
||
类型：`number`
|
||
|
||
### `events`
|
||
|
||
当前对象中所有 Node 节点的事件对象集合
|
||
|
||
类型：`EventInterface[]`
|
||
|
||
### `document`
|
||
|
||
当前 Node 节点所在的 Document 对象。在使用 iframe 中，不同框架中的 document 并是不一致的，还有一些其它环境中也是如此，所以我们需要跟随这个对象。
|
||
|
||
类型：`Document | null`
|
||
|
||
### `window`
|
||
|
||
当前 Node 节点所在的 Window 对象。在使用 iframe 中，不同框架中的 window 并是不一致的，还有一些其它环境中也是如此，所以我们需要跟随这个对象。
|
||
|
||
类型：`Window | null`
|
||
|
||
### `context`
|
||
|
||
上下文节点
|
||
|
||
类型：`Context | undefined`
|
||
|
||
### `name`
|
||
|
||
节点名称
|
||
|
||
类型：`string`
|
||
|
||
### `type`
|
||
|
||
节点类型，与 `Node.nodeType` 一致 [API](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType)
|
||
|
||
类型：`number | undefined`
|
||
|
||
### `display`
|
||
|
||
节点显示状态
|
||
|
||
类型：`string | undefined`
|
||
|
||
### `isFragment`
|
||
|
||
当前对象中的 Node 节点集合是否是框架片段
|
||
|
||
类型：`boolean`
|
||
|
||
### `[n: number]`
|
||
|
||
Node 节点集合，可以通过下标索引访问
|
||
|
||
返回类型：Node
|
||
|
||
## 方法
|
||
|
||
### `each`
|
||
|
||
遍历当前对象内的所有 Node 节点
|
||
|
||
```ts
|
||
/**
|
||
* 遍历
|
||
* @param {Function} callback 回调函数
|
||
* @return {NodeInterface} 返回当前实例
|
||
*/
|
||
each(
|
||
callback: (node: Node, index: number) => boolean | void,
|
||
): NodeInterface;
|
||
```
|
||
|
||
### `toArray`
|
||
|
||
把当前对象内的所有 Node 节点转换为数组
|
||
|
||
```ts
|
||
toArray(): Array<NodeInterface>;
|
||
```
|
||
|
||
### `isElement`
|
||
|
||
当前节点是否为 Node.ELEMENT_NODE 节点类型
|
||
|
||
```ts
|
||
isElement(): boolean;
|
||
```
|
||
|
||
### `isText`
|
||
|
||
当前节点是否为 Node.TEXT_NODE 节点类型
|
||
|
||
```ts
|
||
isText(): boolean;
|
||
```
|
||
|
||
### `isCard`
|
||
|
||
当前节点是否为 Card 组件
|
||
|
||
```ts
|
||
isCard(): boolean;
|
||
```
|
||
|
||
### `isBlockCard`
|
||
|
||
当前节点是否为 block 类型的 Card 组件
|
||
|
||
```ts
|
||
isBlockCard(): boolean;
|
||
```
|
||
|
||
### `isInlineCard`
|
||
|
||
当前节点是否为 inline 类型的 Card 组件
|
||
|
||
```ts
|
||
isInlineCard(): boolean;
|
||
```
|
||
|
||
### `isEditableCard`
|
||
|
||
是否是可编辑的卡片
|
||
|
||
```ts
|
||
isEditableCard(): boolean;
|
||
```
|
||
|
||
### `isRoot`
|
||
|
||
是否为根节点
|
||
|
||
```ts
|
||
isRoot(): boolean;
|
||
```
|
||
|
||
### `isEditable`
|
||
|
||
是否为可编辑节点
|
||
|
||
```ts
|
||
isEditable(): boolean;
|
||
```
|
||
|
||
### `inEditor`
|
||
|
||
是否在根节点内
|
||
|
||
```ts
|
||
inEditor(): boolean;
|
||
```
|
||
|
||
### `isCursor`
|
||
|
||
是否是光标标记节点
|
||
|
||
```ts
|
||
isCursor(): boolean
|
||
```
|
||
|
||
### `get`
|
||
|
||
获取当前 Node 节点
|
||
|
||
```ts
|
||
get<E extends Node>(): E | null;
|
||
```
|
||
|
||
### `eq`
|
||
|
||
获取当前第 index 个节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前第 index 节点
|
||
* @param {number} index
|
||
* @return {NodeInterface|undefined} NodeInterface 类，或 undefined
|
||
*/
|
||
eq(index: number): NodeInterface | undefined;
|
||
```
|
||
|
||
### `index`
|
||
|
||
获取当前节点所在父节点中的索引，仅计算节点类型为 ELEMENT_NODE 的节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点所在父节点中的索引，仅计算节点类型为ELEMENT_NODE的节点
|
||
* @return {number} 返回索引
|
||
*/
|
||
index(): number;
|
||
```
|
||
|
||
### `parent`
|
||
|
||
获取当前节点父节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点父节点
|
||
* @return {NodeInterface} 父节点
|
||
*/
|
||
parent(): NodeInterface | undefined;
|
||
```
|
||
|
||
### `children`
|
||
|
||
查询当前节点的所有子节点
|
||
|
||
```ts
|
||
/**
|
||
*
|
||
* @param {Node | string} selector 查询器
|
||
* @return {NodeInterface} 符合条件的子节点
|
||
*/
|
||
children(selector?: string): NodeInterface;
|
||
```
|
||
|
||
### `first`
|
||
|
||
获取当前节点第一个子节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点第一个子节点
|
||
* @return {NodeInterface} NodeInterface 子节点
|
||
*/
|
||
first(): NodeInterface | null;
|
||
```
|
||
|
||
### `last`
|
||
|
||
获取当前节点最后一个子节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点最后一个子节点
|
||
* @return {NodeInterface} NodeInterface 子节点
|
||
*/
|
||
last(): NodeInterface | null;
|
||
```
|
||
|
||
### `prev`
|
||
|
||
返回节点之前的兄弟节点（包括文本节点、注释节点）
|
||
|
||
```ts
|
||
/**
|
||
* 返回节点之前的兄弟节点（包括文本节点、注释节点）
|
||
* @return {NodeInterface} NodeInterface 节点
|
||
*/
|
||
prev(): NodeInterface | null;
|
||
```
|
||
|
||
### `next`
|
||
|
||
返回节点之后的兄弟节点（包括文本节点、注释节点）
|
||
|
||
```ts
|
||
/**
|
||
* 返回节点之后的兄弟节点（包括文本节点、注释节点）
|
||
* @return {NodeInterface} NodeInterface 节点
|
||
*/
|
||
next(): NodeInterface | null;
|
||
```
|
||
|
||
### `prevElement`
|
||
|
||
返回节点之前的兄弟节点（不包括文本节点、注释节点）
|
||
|
||
```ts
|
||
/**
|
||
* 返回节点之前的兄弟节点（不包括文本节点、注释节点）
|
||
* @return {NodeInterface} NodeInterface 节点
|
||
*/
|
||
prevElement(): NodeInterface | null;
|
||
```
|
||
|
||
### `nextElement`
|
||
|
||
返回节点之后的兄弟节点（不包括文本节点、注释节点）
|
||
|
||
```ts
|
||
/**
|
||
* 返回节点之后的兄弟节点（不包括文本节点、注释节点）
|
||
* @return {NodeInterface} NodeInterface 节点
|
||
*/
|
||
nextElement(): NodeInterface | null;
|
||
```
|
||
|
||
### `getPath`
|
||
|
||
返回节点所在根节点路径，默认根节点为 document.body
|
||
|
||
```ts
|
||
/**
|
||
* 返回节点所在根节点路径，默认根节点为 document.body
|
||
* @param {Node} context 根节点，默认为 document.body
|
||
* @return {number} 路径
|
||
*/
|
||
getPath(context?: Node | NodeInterface): Array<number>;
|
||
```
|
||
|
||
### `contains`
|
||
|
||
判断节点是否包含要查询的节点
|
||
|
||
```ts
|
||
/**
|
||
* 判断节点是否包含要查询的节点
|
||
* @param {NodeInterface | Node} node 要查询的节点
|
||
* @return {Boolean} 是否包含
|
||
*/
|
||
contains(node: NodeInterface | Node): boolean;
|
||
```
|
||
|
||
### `find`
|
||
|
||
根据查询器查询当前节点
|
||
|
||
```ts
|
||
/**
|
||
* 根据查询器查询当前节点
|
||
* @param {String} selector 查询器
|
||
* @return {NodeInterface} 返回一个 NodeInterface 实例
|
||
*/
|
||
find(selector: string): NodeInterface;
|
||
```
|
||
|
||
### closest
|
||
|
||
根据查询器查询符合条件的离当前节点最近的父节点
|
||
|
||
```ts
|
||
/**
|
||
* 根据查询器查询符合条件的离当前节点最近的父节点
|
||
* @param {string} selector 查询器
|
||
* @return {NodeInterface} 返回一个 NodeInterface 实例
|
||
*/
|
||
closest(
|
||
selector: string,
|
||
callback?: (node: Node) => Node | undefined,
|
||
): NodeInterface;
|
||
```
|
||
|
||
### `on`
|
||
|
||
为当前节点绑定事件
|
||
|
||
```ts
|
||
/**
|
||
* 为当前节点绑定事件
|
||
* @param {String} eventType 事件类型
|
||
* @param {Function} listener 事件函数
|
||
* @return {NodeInterface} 返回当前实例
|
||
*/
|
||
on(eventType: string, listener: EventListener): NodeInterface;
|
||
```
|
||
|
||
### `off`
|
||
|
||
移除当前节点事件
|
||
|
||
```ts
|
||
/**
|
||
* 移除当前节点事件
|
||
* @param {String} eventType 事件类型
|
||
* @param {Function} listener 事件函数
|
||
* @return {NodeInterface} 返回当前实例
|
||
*/
|
||
off(eventType: string, listener: EventListener): NodeInterface;
|
||
```
|
||
|
||
### `getBoundingClientRect`
|
||
|
||
获取当前节点相对于视口的位置
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点相对于视口的位置
|
||
* @param {Object} defaultValue 默认值
|
||
* @return {Object}
|
||
* {
|
||
* top,
|
||
* bottom,
|
||
* left,
|
||
* right
|
||
* }
|
||
*/
|
||
getBoundingClientRect(defaultValue?: {
|
||
top: number;
|
||
bottom: number;
|
||
left: number;
|
||
right: number;
|
||
}):
|
||
| { top: number; bottom: number; left: number; right: number }
|
||
| undefined;
|
||
```
|
||
|
||
### `removeAllEvents`
|
||
|
||
移除当前节点所有已绑定的事件
|
||
|
||
```ts
|
||
/**
|
||
* 移除当前节点所有已绑定的事件
|
||
* @return {NodeInterface} 当前 NodeInterface 实例
|
||
*/
|
||
removeAllEvents(): NodeInterface;
|
||
```
|
||
|
||
### `offset`
|
||
|
||
获取当前节点相对父节点的偏移量
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点相对父节点的偏移量
|
||
*/
|
||
offset(): number;
|
||
```
|
||
|
||
### `attributes`
|
||
|
||
获取或设置节点属性
|
||
|
||
```ts
|
||
/**
|
||
* 获取或设置节点属性
|
||
* @param {string|undefined} key 属性名称，key为空获取所有属性，返回Map
|
||
* @param {string|undefined} val 属性值，val为空获取当前key的属性，返回string|null
|
||
* @return {NodeInterface|{[k:string]:string}} 返回值或当前实例
|
||
*/
|
||
attributes(): { [k: string]: string };
|
||
attributes(key: { [k: string]: string }): string;
|
||
attributes(key: string, val: string | number): NodeInterface;
|
||
attributes(key: string): string;
|
||
attributes(
|
||
key?: string | { [k: string]: string },
|
||
val?: string | number,
|
||
): NodeInterface | { [k: string]: string } | string;
|
||
```
|
||
|
||
### `removeAttributes`
|
||
|
||
移除节点属性
|
||
|
||
```ts
|
||
/**
|
||
* 移除节点属性
|
||
* @param {String} key 属性名称
|
||
* @return {NodeInterface} 返当前实例
|
||
*/
|
||
removeAttributes(key: string): NodeInterface;
|
||
```
|
||
|
||
### `hasClass`
|
||
|
||
判断节点是否包含某个 class
|
||
|
||
```ts
|
||
/**
|
||
* 判断节点是否包含某个 class
|
||
* @param {String} className 样式名称
|
||
* @return {Boolean} 是否包含
|
||
*/
|
||
hasClass(className: string): boolean;
|
||
```
|
||
|
||
### `addClass`
|
||
|
||
为节点增加一个 class
|
||
|
||
```ts
|
||
/**
|
||
*
|
||
* @param {string} className
|
||
* @return {NodeInterface} 返当前实例
|
||
*/
|
||
addClass(className: string): NodeInterface;
|
||
```
|
||
|
||
### `removeClass`
|
||
|
||
移除节点 class
|
||
|
||
```ts
|
||
/**
|
||
* 移除节点 class
|
||
* @param {String} className
|
||
* @return {NodeInterface} 返当前实例
|
||
*/
|
||
removeClass(className: string): NodeInterface;
|
||
```
|
||
|
||
### `css`
|
||
|
||
获取或设置节点样式
|
||
|
||
```ts
|
||
/**
|
||
* 获取或设置节点样式
|
||
* @param {String|undefined} key 样式名称
|
||
* @param {String|undefined} val 样式值
|
||
* @return {NodeInterface|{[k:string]:string}} 返回值或当前实例
|
||
*/
|
||
css(): { [k: string]: string };
|
||
css(key: { [k: string]: string | number }): NodeInterface;
|
||
css(key: string): string;
|
||
css(key: string, val: string | number): NodeInterface;
|
||
css(
|
||
key?: string | { [k: string]: string | number },
|
||
val?: string | number,
|
||
): NodeInterface | { [k: string]: string } | string;
|
||
```
|
||
|
||
### `width`
|
||
|
||
获取节点宽度
|
||
|
||
```ts
|
||
/**
|
||
* 获取节点宽度
|
||
* @return {number} 宽度
|
||
*/
|
||
width(): number;
|
||
```
|
||
|
||
### `height`
|
||
|
||
获取节点高度
|
||
|
||
```ts
|
||
/**
|
||
* 获取节点高度
|
||
* @return {Number} 高度
|
||
*/
|
||
height(): number;
|
||
```
|
||
|
||
### `html`
|
||
|
||
获取或设置节点 html 文本
|
||
|
||
```ts
|
||
/**
|
||
* 获取或设置节点html文本
|
||
*/
|
||
html(): string;
|
||
html(html: string): NodeInterface;
|
||
html(html?: string): NodeInterface | string;
|
||
```
|
||
|
||
### `text`
|
||
|
||
```ts
|
||
/**
|
||
* 获取或设置节点文本
|
||
*/
|
||
text(): string;
|
||
text(text: string): NodeInterface;
|
||
text(text?: string): string | NodeInterface;
|
||
```
|
||
|
||
### `show`
|
||
|
||
设置节点为显示状态
|
||
|
||
```ts
|
||
/**
|
||
* 设置节点为显示状态
|
||
* @param {String} display display值
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
show(display?: string): NodeInterface;
|
||
```
|
||
|
||
### `hide`
|
||
|
||
设置节点为隐藏状态
|
||
|
||
```ts
|
||
/**
|
||
* 设置节点为隐藏状态
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
hide(): NodeInterface;
|
||
```
|
||
|
||
### `remove`
|
||
|
||
移除当前实例所有节点
|
||
|
||
```ts
|
||
/**
|
||
* 移除当前实例所有节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
remove(): NodeInterface;
|
||
```
|
||
|
||
### `empty`
|
||
|
||
清空节点下的所有子节点，包括文本
|
||
|
||
```ts
|
||
/**
|
||
* 清空节点下的所有子节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
empty(): NodeInterface;
|
||
```
|
||
|
||
### `equal`
|
||
|
||
比较两个节点是否相同，包括引用地址
|
||
|
||
```ts
|
||
/**
|
||
* 比较两个节点是否相同
|
||
* @param {NodeInterface|Node} node 比较的节点
|
||
* @return {Boolean} 是否相同
|
||
*/
|
||
equal(node: NodeInterface | Node): boolean;
|
||
```
|
||
|
||
### `clone`
|
||
|
||
复制节点
|
||
|
||
```ts
|
||
/**
|
||
* 复制节点
|
||
* @param deep 是否深度复制
|
||
*/
|
||
clone(deep?: boolean): NodeInterface;
|
||
```
|
||
|
||
### `prepend`
|
||
|
||
在节点的开头插入指定内容
|
||
|
||
```ts
|
||
/**
|
||
* 在节点的开头插入指定内容
|
||
* @param {Selector} selector 选择器或节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
prepend(selector: Selector): NodeInterface;
|
||
```
|
||
|
||
### `append`
|
||
|
||
在节点的结尾插入指定内容
|
||
|
||
```ts
|
||
/**
|
||
* 在节点的结尾插入指定内容
|
||
* @param {Selector} selector 选择器或节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
append(selector: Selector): NodeInterface;
|
||
```
|
||
|
||
### `before`
|
||
|
||
在节点前插入新的节点
|
||
|
||
```ts
|
||
/**
|
||
* 在节点前插入新的节点
|
||
* @param {Selector} selector 选择器或节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
before(selector: Selector): NodeInterface;
|
||
```
|
||
|
||
### `after`
|
||
|
||
在节点后插入内容
|
||
|
||
```ts
|
||
/**
|
||
* 在节点后插入内容
|
||
* @param {Selector} selector 选择器或节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
after(selector: Selector): NodeInterface;
|
||
```
|
||
|
||
### `replaceWith`
|
||
|
||
将节点替换为新的内容
|
||
|
||
```ts
|
||
/**
|
||
* 将节点替换为新的内容
|
||
* @param {Selector} selector 选择器或节点
|
||
* @return {NodeInterface} 当前实例
|
||
*/
|
||
replaceWith(selector: Selector): NodeInterface;
|
||
```
|
||
|
||
### `getRoot`
|
||
|
||
获取节点所在编辑区域的根节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取节点所在编辑区域的根节点
|
||
*/
|
||
getRoot(): NodeInterface;
|
||
```
|
||
|
||
### `traverse`
|
||
|
||
遍历所有子节点
|
||
|
||
```ts
|
||
/**
|
||
* 遍历所有子节点
|
||
* @param callback 回调函数，false：停止遍历 ，true：停止遍历当前节点及子节点，继续遍历下一个兄弟节点
|
||
* @param order true:顺序 ，false:倒序，默认 true
|
||
*/
|
||
traverse(
|
||
callback: (node: NodeInterface) => boolean | void,
|
||
order?: boolean,
|
||
): void;
|
||
```
|
||
|
||
### `getChildByPath`
|
||
|
||
根据路径获取子节点
|
||
|
||
```ts
|
||
/**
|
||
* 根据路径获取子节点
|
||
* @param path 路径
|
||
*/
|
||
getChildByPath(path: Path, filter?: (node: Node) => boolean): Node;
|
||
```
|
||
|
||
### `getIndex`
|
||
|
||
获取当前节点所在父节点中的索引
|
||
|
||
```ts
|
||
/**
|
||
* 获取当前节点所在父节点中的索引
|
||
*/
|
||
getIndex(filter?: (node: Node) => boolean): number;
|
||
```
|
||
|
||
### `findParent`
|
||
|
||
在指定容器里获取父节点
|
||
|
||
```ts
|
||
/**
|
||
* 在指定容器里获取父节点
|
||
* @param container 容器节点，默认为编辑器根节点
|
||
*/
|
||
findParent(container?: Node | NodeInterface): NodeInterface | null;
|
||
```
|
||
|
||
### `allChildren`
|
||
|
||
获取节点下的所有子节点
|
||
|
||
```ts
|
||
/**
|
||
* 获取节点下的所有子节点
|
||
*/
|
||
allChildren(): Array<Node>;
|
||
```
|
||
|
||
### `getViewport`
|
||
|
||
返回当前节点或者传入的节点所在当前节点的顶级 window 对象的视图边界
|
||
|
||
```ts
|
||
/**
|
||
* 返回当前节点或者传入的节点所在当前节点的顶级window对象的视图边界
|
||
* @param node 节点
|
||
*/
|
||
getViewport(
|
||
node?: NodeInterface,
|
||
): { top: number; left: number; bottom: number; right: number };
|
||
```
|
||
|
||
### `inViewport`
|
||
|
||
判断 view 是否在 node 节点根据当前节点的顶级 window 对象计算的视图边界内
|
||
|
||
```ts
|
||
/**
|
||
* 判断view是否在node节点根据当前节点的顶级window对象计算的视图边界内
|
||
* @param node 节点
|
||
* @param view 是否在视图的节点
|
||
*/
|
||
inViewport(node: NodeInterface, view: NodeInterface): boolean;
|
||
```
|
||
|
||
### `scrollIntoView`
|
||
|
||
如果 view 节点不可见，将滚动到 align 位置，默认为 nearest
|
||
|
||
```ts
|
||
/**
|
||
* 如果view节点不可见，将滚动到align位置，默认为nearest
|
||
* @param node 节点
|
||
* @param view 视图节点
|
||
* @param align 位置
|
||
*/
|
||
scrollIntoView(
|
||
node: NodeInterface,
|
||
view: NodeInterface,
|
||
align?: 'start' | 'center' | 'end' | 'nearest',
|
||
): void;
|
||
```
|