微信小程序如何获取元素节点信息？

通常在做微信小程序的时候我们经常会需要获取元素的信息，但是微信小程序有没有完整的“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) 选择第一个匹配节点

• 方法二：query.selectAll(queryString) 选择所有匹配节点

  • 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

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) })