脚本宝典收集整理的这篇文章主要介绍了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： <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)
})

相关免费学习推荐：PHP编程（视频）

以上就是uni-app如何获取dom节点的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的uni-app如何获取dom节点全部内容，希望文章能够帮你解决uni-app如何获取dom节点所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。