SelectorQuery

title: SelectorQuery

sidebar_label: 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

API Support

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

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

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

API Support

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

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

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 Support