uniapp取得dom節點的方法：1、透過「let dom=query.select(selector)」方法取得第一個符合選擇器的節點；2、使用「letdoms=query.selectAll(selector) ”方法獲取所有節點。
本教學操作環境：windows7系統、uni-app2.5.1版本、thinkpad t480電腦。
推薦（免費）：uni-app開發教學
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.boundingClienRect(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： 中有多個類別名為leftItem的節點，如何取得這些節點距離頂部的距離，並將這些距離賦給一個在資料區已經定義好的名為leftItemTop的陣列。
uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.log(this.leftItemTop)
})2、例2：
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)
})
})
}
})以上是uniapp如何取得dom節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
