SelectorQuery

The object for querying the node information

Reference

Methods

exec

Executes all requests. The request results form an array in the order of the requests and are returned in the first callback parameter.

Reference

(callback?: (...args: any[]) => any) => NodesRef

Property	Type	Description
callback	(...args: any[]) => any	Callback function

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.exec	✔️	✔️

select

Selects the first node in the current page that matches the selector selector. A NodesRef object instance is returned to obtain the node information.

selector Syntax

The selector is similar to the CSS selector, but only supports the following syntax.

• ID selector:#the-id
• class selector (more than one class selector can be specified in succession): .a-class.another-class
• Child selector: .the-parent > .the-child
• Descendant selector: .the-ancestor .the-descendant
• Descendant selector across custom components: .the-ancestor >>> .the-descendant
• Union of multiple selectors: #a-node, .some-other-nodes

Reference

(selector: string) => NodesRef

Property	Type	Description
selector	string	Selector

Sample Code

Taro.createSelectorQuery().select('#the-id').fields({
  dataset: true,
  size: true,
  scrollOffset: true,
  properties: ['scrollX', 'scrollY']
}, function (res){
  res.dataset
  res.width
  res.height
  res.scrollLeft
  res.scrollTop
  res.scrollX
  res.scrollY
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.select	✔️	✔️

selectAll

Selects all nodes that match the selector "selector" in the current page.

selector Syntax

The selector is similar to the CSS selector, but only supports the following syntax.

• ID selector:#the-id
• class selector (more than one class selector can be specified in succession): .a-class.another-class
• Child selector: .the-parent > .the-child
• Descendant selector: .the-ancestor .the-descendant
• Descendant selector across custom components: .the-ancestor >>> .the-descendant
• Union of multiple selectors: #a-node, .some-other-nodes

Reference

(selector: string) => NodesRef

Property	Type	Description
selector	string	Selector

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.selectAll	✔️	✔️

selectViewport

Selects the display area. It can be used to get the display area size, scroll position, etc.

Reference

() => NodesRef

Sample Code

Taro.createSelectorQuery().selectViewport().scrollOffset(function (res) {
  res.id
  res.dataset
  res.scrollLeft
  res.scrollTop
}).exec()

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.selectViewport	✔️	✔️

in

Changes the selector's selection range to the nodes within the custom component component. (Initially, the selector only selects nodes within the page and does not select any nodes in the custom component.)

Reference

(component: Record<string, any>) => SelectorQuery

Property	Type	Description
component	Record<string, any>	Custom component instance

Sample Code

Component({
  queryMultipleNodes () {
    const query = Taro.createSelectorQuery().in(this)
    query.select('#the-id').boundingClientRect(function(res){
      res.top // The upper boundary coordinate of the #the-id node within this component
    }).exec()
  }
})

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.in	✔️	✔️

API Support

API	WeChat Mini-Program	H5	React Native
SelectorQuery.exec	✔️	✔️
SelectorQuery.select	✔️	✔️
SelectorQuery.selectAll	✔️	✔️
SelectorQuery.selectViewport	✔️	✔️
SelectorQuery.in	✔️	✔️