diff --git a/docs/uni-app-x/dom.md b/docs/uni-app-x/dom.md
index 8c090f6535d9f77bd17e9486333d27a3554aa5ad..afdc4d32de054ca2305732e9448366124be8a999 100644
--- a/docs/uni-app-x/dom.md
+++ b/docs/uni-app-x/dom.md
@@ -11,8 +11,34 @@ UVEU页面在渲染过程中会生成对应的文档对象模型（DOM），DOM
## 获取DOM元素对象@getDomNode
在UVUE页面中可以通过 vue 框架中的组件实例对象 [$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。
-以下是完整的操作示例：
+首先需要为组件设置 ref 属性值：
+```vue
+
+
+
+```
+在页面生命周期 `onReady` 中通过 $refs 获取，如果长期使用，建议保存在vue的 data 中：
+```ts
+export default {
+ data() {
+ return {
+ myNode: null as INode|null //保存后可通过this.myNode访问
+ }
+ },
+ onReady() {
+ // 获取组件对象并保存在 this.myNode 中
+ this.myNode = $refs['myNode'] as INode; //需要使用 as 转换
+ },
+}
+```
+通过INode对象的 style 属性更新组件的样式：
+```ts
+this.myNode?.style?.setProperty('background-color', 'red');
```
+
+
+以下是完整的操作示例：
+```vue
@@ -62,7 +88,7 @@ UVEU页面在渲染过程中会生成对应的文档对象模型（DOM），DOM
## DOM接口
-- INode
-- CSSStyleDeclaration
-- DrawableContext
+- [INode](dom/inode.md)
+- [CSSStyleDeclaration](dom/cssstyle.md)
+- [DrawableContext](dom/drawablecontext.md)
diff --git a/docs/uni-app-x/dom/cssstyle.md b/docs/uni-app-x/dom/cssstyle.md
new file mode 100644
index 0000000000000000000000000000000000000000..a7ee81b454945d9d35d46342fc25d38dd701c267
--- /dev/null
+++ b/docs/uni-app-x/dom/cssstyle.md
@@ -0,0 +1,2 @@
+## CSSStyleDeclaration
+
diff --git a/docs/uni-app-x/dom/drawablecontext.md b/docs/uni-app-x/dom/drawablecontext.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c6b2db190b6e0aae3b99f249c010bbcb547102f
--- /dev/null
+++ b/docs/uni-app-x/dom/drawablecontext.md
@@ -0,0 +1,2 @@
+## DrawableContext
+
diff --git a/docs/uni-app-x/dom/inode.md b/docs/uni-app-x/dom/inode.md
new file mode 100644
index 0000000000000000000000000000000000000000..afe0dab0619b0291d26d47ee2cbf3510603ee17c
--- /dev/null
+++ b/docs/uni-app-x/dom/inode.md
@@ -0,0 +1,78 @@
+## INode
+
+| 属性 | 说明 |
+|-------------------------------------- |-------------------------- |
+| [style](#style) | 组件样式列表对象，参考[CSSStyleDeclaration](cssstyle.md)|
+
+
+| 方法 | 说明 |
+|-------------------------------------- |-------------------------- |
+| [setAttribute](#setAttribute) | 设置组件的某个属性值 |
+| [getAttribute](#getAttribute) | 获取组件指定的属性值 |
+| [getDrawableContext](#getAttribute) | 获取组件的绘制对象 |
+
+
+### style@style
+
+组件的CSS样式列表对象，只读属性。可以通过其 setProperty 方法更新组件的样式。
+
+```ts
+node.style;
+```
+
+
+### setAttribute(name, value)@setAttribute
+
+设置指定组件上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。
+
+```ts
+node.setAttribute("name", "helloButton");
+```
+
+**参数说明**
+
+| 参数 | 类型 | 说明 |
+|-------|-------- |------ |
+| name | string | 属性名称 |
+| value | Any | 属性的值 |
+
+**返回值**
+
+无
+
+
+### getAttribute(attributeName)@getAttribute
+
+获取元素指定的属性值，如果指定的属性不存在则返回null。
+
+```ts
+var attribute = node.getAttribute(attributeName);
+```
+
+**参数说明**
+
+| 参数 | 类型 | 说明 |
+|---------------|-------- |------ |
+| attributeName | string | 属性名称 |
+
+**返回值**
+
+| 类型 | 说明 |
+|------ |---------- |
+| Any? | 属性值，可为null |
+
+
+### getDrawableContext()@getDrawableContext
+
+获取组件的绘制对象，仅uvue页面中的 `view` 组件支持，其它组件不支持则返回null。
+
+```ts
+var drawContext = node.getDrawableContext();
+```
+
+**返回值**
+
+| 类型 | 说明 |
+|------ |---------- |
+| [DrawableContext](drawablecontext.md)? | 绘制对象，可为null |
+