https://github.com/growingio/gio-web-nodes-parser

Library of parsing nodes used by GrowingIO web SDK
https://github.com/growingio/gio-web-nodes-parser

Last synced: 6 days ago
JSON representation

Library of parsing nodes used by GrowingIO web SDK

• Host: GitHub
• URL: https://github.com/growingio/gio-web-nodes-parser
• Owner: growingio
• License: apache-2.0
• Created: 2022-07-25T08:32:38.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-11T10:38:31.000Z (10 months ago)
• Last Synced: 2024-12-09T19:55:46.774Z (about 1 month ago)
• Size: 102 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gio-web-nodes-parser

## 安装

```bash

npm i gio-web-nodes-parser --save

```

## Web 端/圈选使用

```js

import { GioWebNode } from 'gio-web-nodes-parser';

const gioWebNode: GIOWEBNODE = new GioNode(elementNode, actionType);

```

### 参数

| 参数        | 类型                                                  | 必选 | 默认值 | 说明             |

|-------------|-------------------------------------------------------|------|-------|----------------|

| elementNode | Element                                               | √    | 无     | 元素节点         |

| actionType  | 'click' \| 'change' \| 'circleClick' \| 'circleHover' | √    | 无     | 当前响应事件类型 |

### 方法

#### trackNodes() => GIOWEBNODEINFO[]

获取事件节点信息（actionType 为 click 时，会向上冒泡查找符合条件的容器节点信息）

```js

gioWebNode.trackNodes();

```

### 返回属性

#### xpath: string 截取后的 xpath

#### fullXpath: string 完整的 xpath

#### skeleton: string 完整的 xpath 骨架

#### xcontent: string 最后 4 层样式+id

#### outFlow: boolean 真实节点是否脱离文档流

#### triggerEvent: 'VIEW_CLICK' | 'VIEW_CHANGE' 节点触发的事件类型

#### content?: Possible 元素内容

#### index?: Possible 相对位置

#### hyperlink?: Possible 元素链接

#### peerNodes?: Possible 同结构的兄弟节点

### Hybrid端使用

```js

import { GioHybridNode } from 'gio-web-nodes-parser';

const gioHybridNode: GIOHYBRIDNODE = new GioHybridNode({

  webviewLeft,

  webviewTop,

  webviewWidth,

  webviewHeight,

  webviewZLevel

});

```

### 参数

| 参数       | 类型                                                              | 必选 | 默认值 | 说明     |

|------------|-------------------------------------------------------------------|------|-------|--------|

| deviceInfo | { webviewLeft,webviewTop,webviewWidth,webviewHeight,webviewZLevel } | √    | 无     | 设备信息 |

### 方法

#### trackNodes() => GIOHYBRIDNODEINFO[]

获取指定根节点下当前屏幕可视范围内所有可圈选节点信息（并判断元素是否可见，被遮挡的元素会被过滤）

```js

const elements = gioHybridNode.trackNodes(root ?? document.body, {

  isContainer: false,

  zLevel: 0

});

```

获取指定根节点下当前屏幕可视范围内所有可圈选节点信息（忽略元素是否可见，返回被遮挡的元素）

```js

const elements = gioHybridNode.trackNodes(root ?? document.body, {

  isContainer: false,

  zLevel: 0

}, true);

```

### 返回属性

#### xpath: string 截取后的 xpath

#### fullXpath: string 完整的 xpath

#### skeleton: string 完整的 xpath 骨架

#### xcontent: string 最后 4 层样式+id

#### outFlow: boolean 真实节点是否脱离文档流

#### triggerEvent: 'VIEW_CLICK' \| 'VIEW_CHANGE' 节点触发的事件类型

#### content?: Possible\ 元素内容

#### index?: Possible\ 相对位置

#### hyperlink?: Possible\ 元素链接

#### peerNodes?: Possible\ 同结构的兄弟节点

#### top: number 节点矩位置信息

#### left: number 节点矩位置信息

#### width: number 节点矩位置信息

#### height: number 节点矩位置信息

#### zLevel: number 节点层级信息

#### nodeType: string 节点事件触发类型/节点标签名

#### href?: Possible\ 元素链接

#### parentXPath?: Possible\ 父级xpath