在小程序页面查找元素

在微信小程序开发中，由于逻辑层（JavaScript）与视图层（WXML）分离的特性，开发者无法直接操作 DOM 元素。为了获取页面中某个元素的属性（如位置、尺寸等），小程序提供了 wx.createSelectorQuery API，通过创建节点查询对象来间接操作元素。

wx.createSelectorQuery 用于创建一个节点查询对象（SelectorQuery 实例），开发者可以通过该对象选择页面中的元素，并获取其布局信息（如宽高、位置等）。除了wx.createSelectorQuery外，还有一个this.createSelectorQuery，他们之间的区别是一个用在页面中，一个用在组件组件中。

当我们创建了查询对象后，我们需要选择元素，选择元素有以下几种：

• select(selector)：选择匹配选择器的第一个节点。
• selectAll(selector)：选择所有匹配的节点。
• selectViewport()：选择视口（可用于获取滚动容器的信息）。

当元素匹配到之后，我们可以获取元素属性，获取节点属性的方法有：

• boundingClientRect()：获取节点的位置和尺寸。
• scrollOffset()：获取节点的滚动位置（适用于滚动容器）。
• fields({…})：自定义需要获取的字段（如id，dataset，rect等）。

最后，一定要记得调用exec(callback)，这样结果才能查询出来。

下面我们举个小示例，可以方便地看到它如何使用？在这个示例中，我们将获取元素的尺寸和位置。场景如下：点击页面按钮，获取页面中某个view元素的宽度、高度和位置信息。

1，WXML文件如下：

<view class="target-box" id="target">我是目标元素</view>
<button bindtap="getElementInfo">获取元素信息</button>

2，JS文件如下：

Page({
  getElementInfo() {
    // 1. 创建查询实例
    const query = wx.createSelectorQuery();

    // 2. 选择元素并指定获取的属性
    query.select('#target').boundingClientRect();

    // 3. 执行查询
    query.exec((res) => {
      // res 是包含查询结果的数组
      const rect = res[0];
      console.log('元素宽度:', rect.width);
      console.log('元素高度:', rect.height);
      console.log('元素位置:', rect.left, rect.top);
    });
  }
});

如果代码没有错误的话，控制台将输出类似如下内容：

元素宽度: 200
元素高度: 100
元素位置: 15 30

需要注意的事项：

1，生命周期时机：需要在元素渲染完成后（如onReady生命周期或者按钮点击事件）执行查询，否则可能获取不到节点。

2，滚动容器查询，若元素位于滚动容器（如scroll-view）内，需使用in方法指定容器实例：

const query = wx.createSelectorQuery().in(this);  // 指定当前组件实例
query.select('.scroll-item').scrollOffset();

3，异步执行，exec是异步操作，结果通过回调返回，避免在回调外直接使用查询结果。