通常在做微信小程序的时候我们经常会需要获取元素的信息，但是微信小程序有没有完整的“DOM”操作，无法像浏览器中获取元素。
不过在微信中也有一套自己的“DOM”，那就是NodesRef，它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素
一、NodesRef 节点对象
1.1、NodesRef是什么？
NodesRef 用于获取 WXML 节点信息的对象
1.2、NodesRef具备的方法？
NodesRef.fields(Object fields)
获取节点的相关信息获取节点的相关信息NodesRef.boundingClientRect()
添加节点的布局位置的查询请求相对于显示区域，以像素为单位功能类似于 DOM 的 getBoundingClientRectNodesRef.scrollOffset()
添加节点的滚动位置查询请求以像素为单位节点必须是 scroll-view 或者 viewport
二、SelectorQuery 查询节点信息的对象
1.1、 创建SelectorQuery查询对象
let query = wx.createSelectorQuery()
1.2、SelectorQuery方法
SelectorQuery.in (对应的组件)
将选择器的选取范围更改为自定义组件 component 内初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点 SelectorQuery.select(string selector)
在当前页面下选择第一个匹配选择器 selector 的节点 SelectorQuery.selectAll()
在当前页面下选择匹配选择器 selector 的所有节点。 SelectorQuery.selectViewport()
选择显示区域用于获取显示区域的尺寸、滚动位置等信息 SelectorQuery.exec(function callback)
执行所有的请求请求结果按请求次序构成数组，在callback的第一个参数中返回
三、获取某个元素节点信息
第一步、 创建SelectorQuery查询对象
let query = wx.createSelectorQuery()
第二步、 获取节点对象
方法一：query.select(queryString) 选择第一个匹配节点 方法二：query.selectAll(queryString) 选择所有匹配节点
queryString 类型
ID选择器：#the-idclass选择器（可以连续指定多个）：.a-class.another-class子元素选择器：.the-parent > .the-child后代选择器：.the-ancestor .the-descendant跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant多选择器的并集：#a-node, .some-other-nodes
let queryString = '.blue-product>>>.product-list' let queryNode = query.selectAll(queryString)
第三步、调用节点对象方法
获取节点的相关属性developers.weixin.qq.com/miniprogram…https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.fields.html
queryNode.fields({
id:false,//是否返回节点id
rect:fasle,//是否返回节点布局位置
dataset: true,//返回数据集
size: true,//返回宽高
scrollOffset: true,//返回 scrollLeft,scrollTop
properties: ['scrollX', 'scrollY'],//监听属性名
computedStyle: ['margin', 'backgroundColor']//此处返回指定要返回的样式名
}, function(res) {
console.log(res)
})
// 返回结果
[{
dataset:{},
width:247,
height:1065,
scrollLeft:0,
scrollTop:0,
margin:"0px 0px 10px",
backgroundColor:"rgba(0, 0, 0, 0)",
},{
dataset:{},
width:247,
height:1065,
scrollLeft:0,
scrollTop:0,
margin:"0px 0px 10px",
backgroundColor:"rgba(0, 0, 0, 0)",
},{
dataset:{},
width:247,
height:1065,
scrollLeft:0,
scrollTop:0,
margin:"0px 0px 10px",
backgroundColor:"rgba(0, 0, 0, 0)",
}]
添加节点的布局位置的查询请求developers.weixin.qq.com/miniprogram…https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.selectAll.html
query.selectAll(queryClass).boundingClientRect(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
})
添加节点的滚动位置查询请求developers.weixin.qq.com/miniprogram…https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.selectViewport.html
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
res.id // 节点的ID
res.dataset // 节点的dataset
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
})
第四步：可一返回所有的节点信息
query.exec(function(res) { console.log(res) })
推荐文章
您阅读本篇文章共花了：
发表评论