Skip to main content
Version: Next

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
PropertyTypeDescription
callback(...args: any[]) => anyCallback function

API Support

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
selectorstringSelector

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

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
selectorstringSelector

API Support

APIWeChat Mini-ProgramH5React 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

APIWeChat Mini-ProgramH5React 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
PropertyTypeDescription
componentRecord<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

APIWeChat Mini-ProgramH5React Native
SelectorQuery.in✔️✔️

API Support

APIWeChat Mini-ProgramH5React Native
SelectorQuery.exec✔️✔️
SelectorQuery.select✔️✔️
SelectorQuery.selectAll✔️✔️
SelectorQuery.selectViewport✔️✔️
SelectorQuery.in✔️✔️