uniapp怎么获取dom(uniapp怎么获取id)

lxf2023-05-03 14:21:01

uniapp获取dom节点的方法:1、通过“let dom=query.select(selector)方法获取匹配选择器的第一个节点;2、使用“letdoms=query.selectAll(selector)获取所有节点的方法。

uniapp怎么获取dom(uniapp怎么获取id)

本教程操作环境: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节点的信息。

3、如何获取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: