简述uniApp中获取DOM元素方法？

UniApp面试题 8月前 0 1.3K

在 uni-app 中，获取 DOM 元素的方法与传统的 Web 开发有所不同。由于 uni-app 主要面向的是前端跨平台开发，包括小程序和App，它不直接操作 DOM。相反，uni-app 提供了一套 API 来查询和操作页面元素，这主要是通过 Vue 的 ref 属性和 uni.createSelectorQuery 方法实现的。

使用 ref 属性

ref 是 Vue 提供的一个特殊属性，可以用来给元素或子组件注册引用信息。引用信息将会在组件的 $refs 对象上注册。使用 ref 获取元素后，可以直接操作该元素的 Vue 组件实例，但并不能直接操作其 DOM。

示例：

<template>
  <view>
    <text ref="myText">Hello, uni-app</text>
  </view>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myText); // 访问到的是 Vue 组件实例，而不是真正的 DOM 元素
  }
}
</script>

使用 uni.createSelectorQuery 方法

uni.createSelectorQuery 是 uni-app 提供的一个 API，允许开发者根据选择器查询页面元素的信息，类似于 Web 开发中的 document.querySelector 或 jQuery 的选择器。它是专门为小程序和 App 端设计的，可以获取元素的大小、位置等信息，但它不返回元素的直接引用，也不允许直接修改元素样式。

示例：

export default {
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#myElement').boundingClientRect((rect) => {
      if (rect) {
        console.log(rect.width); // 输出元素的宽度
        console.log(rect.height); // 输出元素的高度
      }
    }).exec();
  }
}

在这个示例中，select 方法用于选择页面中的元素，boundingClientRect 方法用来获取元素的位置和尺寸信息，最后通过 exec 方法执行查询操作。

总结来说，uni-app 中获取和操作页面元素的方法与传统 Web 开发有所不同，主要通过 ref 属性和 uni.createSelectorQuery 方法实现，适用于小程序和 App 等非 Web 环境。