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：