uni-app 如何获取DOM 节点

【参考官网：https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】
一、如何获取SelectorQuery对象实例：
let query=uni.createSelectorQuery();
功能：返回一个SelectorQuery对象的实例，该实例用来查询DOM节点的信息。
注意事项：
（1）该方法需要在生命周期mounted后进行调用。
（2）nvue技术不支持该方法。
二、如何获取DOM节点：
1、获取匹配选择器的第一个节点：
let dom=query.select(selector)
2、获取匹配选择器的所有节点：
letdoms=query.selectAll（selector）
上述两个方法均返回NodesRef对象实例，该实例用来获取DOM节点的信息。
三、如何获取DOM节点的信息：（以doms为例）
1、获取DOM节点的布局位置信息：

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

2、获取DOM节点的滚动位置信息：

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

3、获取DOM节点的所有信息：

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

四、代码实例
1、例1： <template>中有多个类名为leftItem的节点，如何获取这些节点距离顶部的距离，并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。

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

2、例2：<template:>中有多个类名为rightItem的节点，如何获取这些节点的高度，并将这些高度赋值给一个在数据区已经定义好的名为rightItem的数组。

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

五、数据渲染DOM造成的异步问题：
【参考官网：https://cn.vuejs.org/v2/api/#vm-nextTick】
【推荐阅读：https://segmentfault.com/a/1190000012861862】
**问题：**某个数据区的变量temp讲影响DOM结构的渲染，且规定该变量更新后直到DOM结构重新渲染完成后还需要做一个其他的操作，则这些其他的操作如何保证在DOM结构重新渲染完成后才发生？
解决方案：这些需要DOM结构重新渲染完成后才发生的操作必须写在this&nextTick(function(){})格式的回调函数中。

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

我们就说上述结构是基于数据domData驱动的结构，变量domData需要先从接口中获取必要的数据，再渲染到DOM结构中。

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

当变量domData从接口中得到数据后，还必须保证成功渲染了DOM结构之后，才能去获取这些结构的宽度，因此要将后续的操作用this.nextTick(function(){})包裹起来 ，既书写在this.nextTick(function(){})的回调函数内部。
上述事例的代码如下：

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)
			})
		})
	}
})