uniapp如何取得dom節點

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： d477f9ce7bf77f53fbcf36bec1b69b7a中有多個類別名為leftItem的節點，如何取得這些節點距離頂部的距離，並將這些距離賦給一個在資料區已經定義好的名為leftItemTop的陣列。

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

2、例2：cf02b64373d56bfa6005cf61bdd2cdf0中有多個類別名為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)
})
})
}
})

以上是uniapp如何取得dom節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！