uni-app如何操作DOM元素 uni-app使用createSelectorQuery方法-uni-app-PHP中文网

uni-app中不能直接操作DOM，唯一跨端安全的节点查询方式是uni.createSelectorQuery()，它返回只读节点信息而非可操作DOM，适用于获取位置、尺寸等，不可调用focus()等方法。

uni-app如何操作dom元素 uni-app使用createselectorquery方法

uni-app里不能直接操作DOM，`createSelectorQuery`是唯一可行路径

uni-app 运行在多端（微信小程序、H5、App等），没有统一的 DOM 概念。H5 端虽有真实 DOM，但其他平台（尤其是小程序）只有虚拟节点树，document.getElementById 或 querySelector 在非 H5 端会报错或返回 null。真正跨端安全的操作方式，只有 uni.createSelectorQuery()（或其简写 uni.createSelectorQuery），它封装了各端查询逻辑，返回的是节点信息而非原生 DOM 对象。

`createSelectorQuery` 查询不到元素的常见原因

多数“查不到”不是 API 用错了，而是时机或选择器问题：

组件尚未渲染完成就执行查询 —— 必须在 onReady 或 nextTick（H5）后调用，onLoad 阶段节点通常还未挂载
选择器用了 class/id 但没加前缀：小程序端要求 class 选择器必须带点（.my-class），id 选择器必须带井号（#my-id）；H5 端虽宽松，但为跨端一致，务必统一加
在 v-for 列表中查询动态生成的节点时，未用 selectComponent 或未等列表渲染完毕，导致节点不存在
查询的是自定义组件内部节点，但没使用 in(this) 指定作用域，查询范围默认是页面根节点

正确用法：查位置、尺寸、样式，但不能调用 DOM 方法

createSelectorQuery 返回的是节点的只读快照信息，不是可操作的 DOM 元素。你只能获取 boundingClientRect、scrollOffset、fields 等字段，不能调用 focus()、click() 或修改 style。需要触发行为，请改用 uni.$emit 或 props 通知子组件，或用 uni.createAnimation 做动画。

示例：获取某个视图区域的宽高和坐标

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

uni.createSelectorQuery()
  .select('#my-view')
  .boundingClientRect()
  .exec(res => {
    if (res[0]) {
      console.log('top:', res[0].top, 'width:', res[0].width)
    }
  })