SelectorQuery.select

Introduction

Selects the first node that matches the selector selector in the current page and returns a NodesRef object instance that can be used to retrieve node information.

Parameters

String selector

Explanation of the selector parameter

Selector Type	Example
ID Selector	#the-id
Class Selector	.a-class, .a-class.another-class
Child Selector	.the-parent > .the-child
Descendant Selector	.the-ancestor .the-descendant
Multiple Selectors	#a-node, .some-other-nodes

Return Value

NodesRef

Sample Code

// Class Selector
Page({
  data: {
    message: '',
  },
  onReady() {
    this.queryNodeInfo();
  },
  queryNodeInfo() {
    const query = dlt.createSelectorQuery();
    query
      .select('.target')
      .boundingClientRect((res) => {
        console.log('Node Information: ', res);
        this.setData({ message: res.top });
      })
      .exec();
  },
});

// ID Selector
Page({
  data: {
    message: '',
  },
  onReady() {
    this.queryNodeInfo();
  },
  queryNodeInfo() {
    const query = dlt.createSelectorQuery();
    query
      .select('#target')
      .boundingClientRect((res) => {
        console.log('Node Information: ', res);
        this.setData({ message: res.top });
      })
      .exec();
  },
});

// Multiple Class Selectors
Page({
  data: {
    message: '',
  },
  onReady() {
    this.queryNodeInfo();
  },
  queryNodeInfo() {
    const query = dlt.createSelectorQuery();
    query
      .select('.target.target2')
      .boundingClientRect((res) => {
        console.log('Node Information: ', res);
        this.setData({ message: res.top });
      });
      .exec();
  },
});

// Child Selector
Page({
  data: {
    message: '',
  },
  onReady() {
    this.queryNodeInfo();
  },
  queryNodeInfo() {
    const query = dlt.createSelectorQuery();
    query
      .select('.target>.block')
      .boundingClientRect((res) => {
        console.log('Node Information: ', res);
        this.setData({ message: res.top });
      });
      .exec();
  },
});