uni-app如何取得dom節點

uniapp取得dom節點的方法：1、取得符合選擇器的第一個節點，程式碼為【let dom=query.select(selector)】；2、取得符合選擇器的所有節點，程式碼為【letdoms=query.selectAll（selec.】。

#本教學操作環境：windows7系統、uni-app2.5.1版本，Dell G3電腦，該方法適用於所有品牌電腦。

建議（免費）：uni-app開發教學    

##uniapp取得dom節點的方法：

一、如何取得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)
})

######相關免費學習推薦：###php程式設計###（影片）#########

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