通常在做微信小程序的时候我们经常会需要获取元素的信息，但是微信小程序有没有完整的“DOM”操作，无法像浏览器中获取元素。
不过在微信中也有一套自己的“DOM”，那就是NodesRef，它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素
一、NodesRef 节点对象
1.1、NodesRef是什么？
NodesRef 用于获取 WXML 节点信息的对象
1.2、NodesRef具备的方法？
- NodesRef.fields(Object fields)
- 获取节点的相关信息
- 获取节点的相关信息
- NodesRef.boundingClientRect()
- 添加节点的布局位置的查询请求
- 相对于显示区域，以像素为单位
- 功能类似于 DOM 的 getBoundingClientRect
- NodesRef.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) 选择第一个匹配节点文章来源：https://www.toymoban.com/news/detail-753718.html
-
方法二：query.selectAll(queryString) 选择所有匹配节点文章来源地址https://www.toymoban.com/news/detail-753718.html
-
queryString 类型
- ID选择器：#the-id
- class选择器（可以连续指定多个）：.a-class.another-class
- 子元素选择器：.the-parent > .the-child
- 后代选择器：.the-ancestor .the-descendant
- 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
- 多选择器的并集：#a-node, .some-other-nodes
-
queryString 类型
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) })到了这里，关于微信小程序如何获取元素节点信息？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
