Skip to main content

bn.createSelectorQuery

createSelectorQuery(component?): SelectorQuery

description Returns a SelectorQuery Object instance which contains information or method of selected node.

example

bn.createSelectorQuery()
.select('#canvas')
.fields({ node: true, size: true })
.exec(res => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
ctx.fillRect(0, 0, 100, 100)
})

Parameters

NameType
component?ComponentInstance

Returns

SelectorQuery

Interface: ComponentInstance

NameTypeDescription
idstringinstance id

Class: SelectorQuery

NameTypeDescription
_rendererIdnumber
_queueQueryItem[] = []
_queueCb(null | Function)[] = []
_componentstring
_optionsSelectorQueryOptions
exec(callback?): voidExecute all requests. The request results form an array in the order requested and are returned in the first parameter of callback.
select(selector, options?): NodesRef<true>Select the first node matches with selector. return a NodesRef object instance, used to get node info.
selectAll(selector): NodesRef<false>selector grammar
Selectors are similar to CSS But only the following syntax is supported.
selectViewport(): NodesRef<true>Select the display area. Can be used to obtain display area size, scroll position and other information.
in(component): SelectorQueryChange the selection of a selector to a custom component component Inside. Initially, the selector selects only page-scoped nodes, not nodes in any custom component.
_push(selector, component, single, rootPortal, fields, callback?): void

exec

exec(callback?): void

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

Parameters

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

Returns

void


select

select(selector, options?): NodesRef<true>

Select the first node matches with selector. return a NodesRef object instance, used to get node info.

selector grammar

selector acts like selector of CSS, but only support following grammar.

  • id: #the-id
  • class (can specify multiple classes): .a-class.another-class
  • child element: .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

example

bn.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()

Parameters

NameType
selectorstring
options?Object
options.rootPortal?boolean

Returns

NodesRef<true>


selectAll

selectAll(selector): NodesRef<false>

selector grammar Selectors are similar to CSS But only the following syntax is supported.

ID selector:#the-id Class selector (you can specify more than one in a row):. a-class.another-class Child element selector:. The-parent > .the-child Descendant selector:. The-ancester .the-descendant Descendant selector across custom components:. The-ancester >>> .the-descendant Union of multiple selectors:#a-node, .some-other-nodes

Parameters

NameType
selectorstring

Returns

NodesRef<false>


selectViewport

selectViewport(): NodesRef<true>

Select the display area. Can be used to obtain display area size, scroll position and other information.

example

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

Returns

NodesRef<true>


in

in(component): SelectorQuery

Change the selection of a selector to a custom component component Inside. Initially, the selector selects only page-scoped nodes, not nodes in any custom component.

example

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

Parameters

NameType
componentObject
component._Object
component._.idstring

Returns

SelectorQuery


_push

_push(selector, component, single, rootPortal, fields, callback?): void

Parameters

NameTypeDefault value
selectorstringundefined
componentstringundefined
singlebooleanundefined
rootPortalbooleanundefined
fieldsFieldsundefined
callbacknull | Functionnull

Returns

void

Class: NodesRef<Single>

NameTypeDescription
_componentstring
_selectorstring
_selectorQuerySelectorQuery
_singleSingle
_rootPortalboolean
boundingClientRect(callback?): SelectorQueryAdd a query request for the layout location of the node. In pixels relative to the display area. This function is similar to getBoundingClientRect.
context(callback?): SelectorQueryAdd node Context Object query request. Currently support VideoContext, CanvasContext, EditorContext.
fields(fields, callback?): SelectorQueryGets information about the node. The fields to fetch are specified in fields
node(_callback?): SelectorQueryObtain Node Node instance
scrollOffset(callback?): SelectorQueryAdds a scrolling position query request for the node. In pixels. Nodes must be scroll-view or viewport.

boundingClientRect

boundingClientRect(callback?): SelectorQuery

Add a query request for the layout location of the node. In pixels relative to the display area. This function is similar to getBoundingClientRect.

example

bn.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // node id
rect.dataset // node dataset
rect.left // node left bound coordinate
rect.right // node right bound coordinate
rect.top // node top bound coordinate
rect.bottom // node bottom bound coordinate
rect.width // node width
rect.height // node height
}).exec()
@example
bn.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
rects.forEach(function(rect){
rect.id // node id
rect.dataset // node dataset
rect.left // node left bound coordinate
rect.right // node right bound coordinate
rect.top // node top bound coordinate
rect.bottom // node bottom bound coordinate
rect.width // node width
rect.height // node height
})
}).exec()

Parameters

NameType
callback?BoundingClientRectCallback<Single>

Returns

SelectorQuery


context

context(callback?): SelectorQuery

Add node Context Object query request. Currently support VideoContext, CanvasContext, EditorContext.

example

bn.createSelectorQuery().select('.the-video-class').context(function (res) {
console.log(res.context)
}).exec()

Parameters

NameType
callback?ContextCallback

Returns

SelectorQuery


fields

fields(fields, callback?): SelectorQuery

Gets information about the node. The fields to fetch are specified in fields

Be careful computedStyle Has a higher priority than Size, when at the same time computedStyle Lee specified width/height And passed in size: True, returns first computedStyle Acquired width/height.

example

bn.createSelectorQuery().select('#the-id').fields({
dataset: true,
size: true,
scrollOffset: true,
properties: ['scrollX', 'scrollY'],
computedStyle: ['margin', 'backgroundColor'],
context: true,
}, function (res) {
rect.id // node id
rect.dataset // node dataset
rect.left // node left bound coordinate
rect.right // node right bound coordinate
rect.top // node top bound coordinate
rect.bottom // node bottom bound coordinate
rect.width // node width
rect.height // node height
}).exec()

Parameters

NameType
fieldsFields
callback?FieldsCallback<Single>

Returns

SelectorQuery


node

node(_callback?): SelectorQuery

Obtain Node Node instance

example

bn.createSelectorQuery().select('.canvas').node(function(res){
console.log(res.node) // canvas instance
}).exec()

Parameters

NameType
_callback?NodeCallback

Returns

SelectorQuery


scrollOffset

scrollOffset(callback?): SelectorQuery

Adds a scrolling position query request for the node. In pixels. Nodes must be scroll-view or viewport.

example

bn.createSelectorQuery().selectViewport().scrollOffset(function(res){
res.id // node id
res.dataset // node dataset
res.scrollLeft // Horizontal scrolling position of node
res.scrollTop // Vertical scroll position of node
}).exec()

Parameters

NameType
callback?ScrollOffsetCallback

Returns

SelectorQuery

Class: SelectorQuery

NameTypeDescription
_rendererIdnumber
_queueQueryItem[] = []
_queueCb(null | Function)[] = []
_componentstring
_optionsSelectorQueryOptions
exec(callback?): voidExecute all requests. The request results form an array in the order requested and are returned in the first parameter of callback.
select(selector, options?): NodesRef<true>Select the first node matches with selector. return a NodesRef object instance, used to get node info.
selectAll(selector): NodesRef<false>selector grammar
Selectors are similar to CSS But only the following syntax is supported.
selectViewport(): NodesRef<true>Select the display area. Can be used to obtain display area size, scroll position and other information.
in(component): SelectorQueryChange the selection of a selector to a custom component component Inside. Initially, the selector selects only page-scoped nodes, not nodes in any custom component.
_push(selector, component, single, rootPortal, fields, callback?): void

exec

exec(callback?): void

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

Parameters

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

Returns

void


select

select(selector, options?): NodesRef<true>

Select the first node matches with selector. return a NodesRef object instance, used to get node info.

selector grammar

selector acts like selector of CSS, but only support following grammar.

  • id: #the-id
  • class (can specify multiple classes): .a-class.another-class
  • child element: .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

example

bn.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()

Parameters

NameType
selectorstring
options?Object
options.rootPortal?boolean

Returns

NodesRef<true>


selectAll

selectAll(selector): NodesRef<false>

selector grammar Selectors are similar to CSS But only the following syntax is supported.

ID selector:#the-id Class selector (you can specify more than one in a row):. a-class.another-class Child element selector:. The-parent > .the-child Descendant selector:. The-ancester .the-descendant Descendant selector across custom components:. The-ancester >>> .the-descendant Union of multiple selectors:#a-node, .some-other-nodes

Parameters

NameType
selectorstring

Returns

NodesRef<false>


selectViewport

selectViewport(): NodesRef<true>

Select the display area. Can be used to obtain display area size, scroll position and other information.

example

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

Returns

NodesRef<true>


in

in(component): SelectorQuery

Change the selection of a selector to a custom component component Inside. Initially, the selector selects only page-scoped nodes, not nodes in any custom component.

example

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

Parameters

NameType
componentObject
component._Object
component._.idstring

Returns

SelectorQuery


_push

_push(selector, component, single, rootPortal, fields, callback?): void

Parameters

NameTypeDefault value
selectorstringundefined
componentstringundefined
singlebooleanundefined
rootPortalbooleanundefined
fieldsFieldsundefined
callbacknull | Functionnull

Returns

void

Interface: Fields

NameTypeDescription
computedStyle?string[]Specifies a list of style names and returns the current value of the node corresponding to the style name
context?booleanReturns the corresponding node Context object
dataset?booleanReturns a node dataset
id?booleanReturns a node id
mark?booleanReturns a node mark
node?booleanReturns the corresponding node Node Example
properties?string[]Specifies a list of property names that returns the current property value of the node corresponding to the property name. class style And event - bound property values are not available
rect?booleanReturns the node layout location(left right top bottom
scrollOffset?booleanWhether to return a node's scrollLeft scrollTopNode must be scroll-view or viewport
size?booleanReturns the node size(width height

BoundingClientRectCallback

Ƭ BoundingClientRectCallback<Single>: (result: Single extends true ? BoundingClientRect : BoundingClientRect[]) => void

Type parameters

NameType
Singleextends boolean

Type declaration

▸ (result): void

Callback function,after executing SelectorQuery.exec, node info return in callback function

Parameters

NameType
resultSingle extends true ? BoundingClientRect : BoundingClientRect[]

Returns

void


Interface: BoundingClientRect

NameTypeDescription
bottomnumberLower boundary coordinates of nodes
datasetRecord<string, any>Node dataset
heightnumberNode height
idstringNode ID
leftnumberLeft boundary coordinates of nodes
rightnumberNode's right boundary coordinates
topnumberUpper boundary coordinates of nodes
widthnumberNode width

ContextCallback

Ƭ ContextCallback: (result: ContextCallbackResult) => void

Type declaration

▸ (result): void

Callback function,after executing SelectorQuery.exec, node info return in callback function

Parameters

NameType
resultContextCallbackResult

Returns

void


Interface: ContextCallbackResult

NameTypeDescription
contextRecord<string, unknown>node's context instance

FieldsCallback

Ƭ FieldsCallback<Single>: (res: Single extends true ? Record<string, unknown> : Record<string, unknown>[]) => void

Type parameters

NameType
Singleextends boolean

Type declaration

▸ (res): void

callback function

Parameters

NameType
resSingle extends true ? Record<string, unknown> : Record<string, unknown>[]

Returns

void


NodeCallback

Ƭ NodeCallback: (result: NodeCallbackResult) => void

Type declaration

▸ (result): void

Callback function,after executing SelectorQuery.exec, node info return in callback function

Parameters

NameType
resultNodeCallbackResult

Returns

void


Interface: NodeCallbackResult

NameTypeDescription
nodeRecord<string, unknown>node instance

ScrollOffsetCallback

Ƭ ScrollOffsetCallback: (result: ScrollOffsetCallbackResult) => void

Type declaration

▸ (result): void

Callback function,after executing SelectorQuery.exec, node info return in callback function

Parameters

NameType
resultScrollOffsetCallbackResult

Returns

void

Interface: ScrollOffsetCallbackResult

NameTypeDescription
datasetRecord<string, unknown>node dataset
idstringnode ID
scrollLeftnumberHorizontal scrolling position of node
scrollTopnumberVertical scroll position of node