uni-app中不能直接操作DOM，唯一跨端安全的节点查询方式是uni.createSelectorQuery()，它返回只读节点信息而非可操作DOM，适用于获取位置、尺寸等，不可调用focus()等方法。
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.createSelectorQuery()
.select('#my-view')
.boundingClientRect()
.exec(res => {
if (res[0]) {
console.log('top:', res[0].top, 'width:', res[0].width)
}
})
H5 端想真 DOM？可以但不推荐
H5 端确实能通过 this.$refs.xxx.$el 拿到真实 DOM 节点，也能用 querySelector，但这会破坏跨端一致性。一旦你写了 el.style.color = 'red'，小程序端直接报错。如果真有强 DOM 需求（如集成第三方地图、图表库），应：
- 用
v-if="uni.getSystemInfoSync().platform === 'h5'"包裹 H5 专属逻辑 - 避免在公共方法里混用 DOM 和
createSelectorQuery - 注意 H5 端的
createSelectorQuery实际也是转成querySelector，但做了兼容封装，优先走它更稳妥
跨端稳定性的代价，就是放弃直接操作 DOM 的自由——这是 uni-app 的设计前提，不是 bug。
