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 d477f9ce7bf77f53fbcf36bec1b69b7a For nodes whose class name is leftItem, how to obtain the distance from the top of these nodes and assign these distances to an array named leftItemTop that has been defined in the data area.

uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.log(this.leftItemTop)
})

2. Example 2: There are multiple nodes named rightItem in cf02b64373d56bfa6005cf61bdd2cdf0. How to get the height of these nodes and assign these heights to a node that has been defined in the data area? An array named rightItem.

uni.createSelectorQuery().selectAll(".rightItem").fields({
size:true
},res=>{
this.rightItemHeight=res.map(item=>{item.height})
}).exec(()=>{
console.log(this.rightItemHeight)
})

5. Asynchronous problems caused by data rendering DOM:

[Reference official website: https://cn.vuejs.org/v2/api/#vm-nextTick]

[Recommended reading: https://segmentfault.com/a/1190000012861862]

**Question:**The variable temp in a certain data area affects the rendering of the DOM structure, and it is specified that after the variable is updated Another operation needs to be performed until the DOM structure is re-rendered. How can these other operations ensure that these other operations occur only after the DOM structure is re-rendered?

Solution: These operations that require the DOM structure to be re-rendered must be written in the callback function in the format of this&nextTick(function(){}).

<block v-for="(item,index) in domData">
<view class="domItem">{{item.title}}</view>
</block>

Let’s just say that the above structure is a structure driven by data domData. The variable domData needs to obtain the necessary data from the interface first and then render it into the DOM structure.

data(){
return{
domData:[], //用于储存从接口中获取的DOM数据
domItemWidth:[] //用于储存获取的DOM结构的宽度
}
}

When the variable domData gets the data from the interface, it must also ensure that the DOM structure is successfully rendered before the width of these structures can be obtained. Therefore, subsequent operations must use this.nextTick(function(){ }), which is written inside the callback function of this.nextTick(function(){}).

The code for the above example is as follows:

uni.request({
url:"http://localhost:8080/......",
data:{.....},
success:res=>{
this.domData=res.data;
this.nextTick(()=>{//该格式保证了domData已经得到接口数据并成功渲染DOM结构
uni.createSelectorQuery().selectAll(".domItem").fields({
size:true
},res=>{
this.domItemWidth=res.map(item=>item.width)
}).exec(()=>{
console.log(this.domItemWidth)
})
})
}
})

The above is the detailed content of How to get dom node in uniapp. For more information, please follow other related articles on the PHP Chinese website!