HarmonyOS鸿蒙Next中ArkUI能否像jQuery一样查找元素节点和修改元素？

HarmonyOS鸿蒙Next中ArkUI能否像jQuery一样查找元素节点和修改元素？ ArkUI能否像jQuery一样查找元素节点和修改元素？

10 回复

尊敬的开发者，您好！该功能正在评估中，感谢您的理解与支持。

更多关于HarmonyOS鸿蒙Next中ArkUI能否像jQuery一样查找元素节点和修改元素？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


背景知识：

按照楼主所说的 jQuery getelementXX()元素的方式来获取对应布局的实例，在需要的使用进行修改。这种是命令式框架，ArkUI是响应式处理，使用数据驱动来刷新的。目前还是没有相应的获取方法。但是看文档是有一个 getInspectorByKey 方法的。

问题解决：

使用 getInspectorByKey 方法来获取是出现问题：

cke_15414.png

此方法不能在源代码使用，只能在测试目录下使用。综上目前还是没有类似jQuery获取元素的方法。

只能获取元素信息：

this.getUIContext().getComponentUtils().getRectangleById('id')

如需修改需要使用数据驱动视图更新，参考：

@State w: number = 100
@State h: number = 100


build() {
  
  Column(){
    Row()
      .width(this.w)
      .height(this.h)
      .onClick(() => {
        // 可修改元素宽度
        this.w = 200
      })
  }
}

答案：可以的

通过“组件标识”进行获取，先给组件设置id值，例如：

Button() {}.id('click')

通过以下方法获取该组件对象：

let result = getInspectorByKey("click");

参考文档：组件标识-基础属性-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

ArkUI（鸿蒙应用开发的 UI 框架）与 jQuery 的设计理念和工作方式有本质区别，不能像 jQuery 那样通过全局选择器直接查找和修改元素节点，但可以通过声明式的状态驱动和组件引用机制实现类似功能，核心差异源于 “命令式 DOM 操作” 与 “声明式状态驱动” 的范式区别。
组件标识-基础属性-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

答案是：不能

ArkUI 的渲染机制是“声明式 UI + 状态驱动”，框架在编译期就把组件描述展开成一棵由 C++ 维护的轻量级“虚拟节点树”（亦称 RenderTree）。运行期开发者只能拿到代理对象（FrameNode/BuilderNode），它只暴露了极有限的只读信息（位置、大小、焦点状态等）和少量事件监听接口，既不支持像 jQuery 那样用选择器任意检索节点，也不支持直接修改文本、属性或样式；所有视觉变更必须通过修改关联的 @State / @Prop / @Link 等状态变量，由框架 diff 后统一重绘。

您好，jQuery是命令式的，可以直接操作DOM。而ArkUI是声明式UI框架，类似于React或Vue，这种情况需要换一种方式实现。

例如，jQuery中可以直接通过$("#title").text(“新标题”)修改标题，而ArkUI中可能需要绑定一个状态变量，通过改变变量值来触发UI更新。

// jQuery方式
$("#title").text("新标题");

// ArkUI方式
@State title: string = "默认标题";
...
Text(this.title)
  .onClick(() => {
    this.title = "新标题"; // 数据变化自动触发UI更新
  })

都数据驱动了，😭。一般情况下都不会通过这样修改了

ArkUI采用声明式UI范式，不支持类似jQuery的DOM操作方式。在鸿蒙Next中，UI组件状态通过状态变量驱动更新，修改@State、@Link等装饰的变量会自动触发对应组件刷新。组件可通过唯一ID标识，使用$符号获取组件实例，如this.$ref('componentId')可获取指定组件，但主要用于调用组件暴露的方法而非直接操作节点。UI更新必须通过状态管理实现，不能直接修改组件属性。

在HarmonyOS Next的ArkUI中，不能像jQuery那样直接通过DOM选择器查找和修改元素节点。ArkUI采用声明式UI范式，通过状态驱动视图更新，而非直接操作节点。

主要区别：

  1. 元素访问：ArkUI使用组件和状态绑定，无需手动查找节点
  2. 修改方式：通过@State、@Prop等装饰器管理状态，状态变更自动更新对应组件
  3. 开发模式：推荐使用组件化开发，通过数据变化驱动UI刷新

示例：

@Entry
@Component
struct MyComponent {
  [@State](/user/State) isVisible: boolean = true
  
  build() {
    Column() {
      if (this.isVisible) {
        Text('Hello').fontSize(20)
      }
      Button('Toggle')
        .onClick(() => {
          this.isVisible = !this.isVisible
        })
    }
  }
}

这种方式更符合现代前端框架理念，能更好地管理UI状态和保证性能。

回到顶部