How to get dom node in uniapp

Uniapp's method of obtaining dom nodes: 1. Get the first node matching the selector through the "let dom=query.select(selector)" method; 2. Use "letdoms=query.selectAll(selector)" " method to get all nodes.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, thinkpad t480 computer.

Recommended (free): uni-app development tutorial

uni-app Obtain DOM node

[Reference official website: https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】

1. How to obtain the SelectorQuery object instance:

let query=uni.createSelectorQuery();

Function: Return a SelectorQuery object Instance, this instance is used to query the information of DOM nodes.

Notes:

(1) This method needs to be called after the life cycle is mounted.

(2) nvue technology does not support this method.

2. How to get the DOM node:

1. Get the first node that matches the selector:

let dom=query.select(selector)

2. Get all the nodes that match the selector:

letdoms=query.selectAll（selector）

Both the above two methods return NodesRef object instance, which is used to obtain DOM node information.

3. How to get the information of DOM nodes: (take doms as an example)

1. Get the layout position information of DOM nodes:

doms.boundingClienRect(function(res){
//res:{left,top,right,bottom,width,height}
}).exec(function(){
//上述布局位置信息获取成功后执行的回调函数
})

2. Get the information of DOM nodes Scroll position information:

doms.scrollOffset(function(){
//res:{scrollLeft,scrollTop}
}).exec(function(){
//上述滚动位置信息获取成功后执行的回调函数
})

3. Get all information of DOM nodes:

doms.fields({
rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
size:true,  //是否返回节点尺寸信息{width，height}
scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
},function(res){
//res 可以返回第一个参数对象中指定为true的相关信息
}).exec(function(){
//上述节点信息获取成功后执行的回调函数
})

4. Code examples

1. Example 1: There are multiple in