通常在做微信小程序的時候我們經(jīng)常會需要獲取元素的信息，但是微信小程序有沒有完整的“DOM”操作，無法像瀏覽器中獲取元素。

不過在微信中也有一套自己的“DOM”，那就是NodesRef，它可以讓我們像開發(fā)瀏覽器程序一樣輕松愉快的獲取頁面元素

一、NodesRef 節(jié)點對象

1.1、NodesRef是什么？

NodesRef 用于獲取 WXML 節(jié)點信息的對象

1.2、NodesRef具備的方法？

• NodesRef.fields(Object fields)
  • 獲取節(jié)點的相關信息
  • 獲取節(jié)點的相關信息
• NodesRef.boundingClientRect()
  • 添加節(jié)點的布局位置的查詢請求
  • 相對于顯示區(qū)域，以像素為單位
  • 功能類似于 DOM 的 getBoundingClientRect
• NodesRef.scrollOffset()
  • 添加節(jié)點的滾動位置查詢請求
  • 以像素為單位
  • 節(jié)點必須是 scroll-view 或者 viewport

二、SelectorQuery 查詢節(jié)點信息的對象

1.1、 創(chuàng)建SelectorQuery查詢對象

let query = wx.createSelectorQuery()

1.2、SelectorQuery方法

• SelectorQuery.in (對應的組件)

  • 將選擇器的選取范圍更改為自定義組件 component 內(nèi)
  • 初始時，選擇器僅選取頁面范圍的節(jié)點，不會選取任何自定義組件中的節(jié)點

• SelectorQuery.select(string selector)

  • 在當前頁面下選擇第一個匹配選擇器 selector 的節(jié)點

• SelectorQuery.selectAll()

  • 在當前頁面下選擇匹配選擇器 selector 的所有節(jié)點。

• SelectorQuery.selectViewport()

  • 選擇顯示區(qū)域
  • 用于獲取顯示區(qū)域的尺寸、滾動位置等信息

• SelectorQuery.exec(function callback)

  • 執(zhí)行所有的請求
  • 請求結果按請求次序構成數(shù)組，在callback的第一個參數(shù)中返回

三、獲取某個元素節(jié)點信息

第一步、 創(chuàng)建SelectorQuery查詢對象

let query = wx.createSelectorQuery()

第二步、 獲取節(jié)點對象

• 方法一：query.select(queryString) 選擇第一個匹配節(jié)點

• 方法二：query.selectAll(queryString) 選擇所有匹配節(jié)點文章來源地址http://www.zghlxwxcb.cn/news/detail-753718.html

  • queryString 類型
    • ID選擇器：#the-id
    • class選擇器（可以連續(xù)指定多個）：.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)

第三步、調(diào)用節(jié)點對象方法

• 獲取節(jié)點的相關屬性
• developers.weixin.qq.com/miniprogram…https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.fields.html

queryNode.fields({
      id:false,//是否返回節(jié)點id
      rect:fasle,//是否返回節(jié)點布局位置
      dataset: true,//返回數(shù)據(jù)集
      size: true,//返回寬高
      scrollOffset: true,//返回 scrollLeft,scrollTop
      properties: ['scrollX', 'scrollY'],//監(jiān)聽屬性名
      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)",
    }]

• 添加節(jié)點的布局位置的查詢請求
• 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      // 節(jié)點的ID
      rect.dataset // 節(jié)點的dataset
      rect.left    // 節(jié)點的左邊界坐標
      rect.right   // 節(jié)點的右邊界坐標
      rect.top     // 節(jié)點的上邊界坐標
      rect.bottom  // 節(jié)點的下邊界坐標
      rect.width   // 節(jié)點的寬度
      rect.height  // 節(jié)點的高度
 })

• 添加節(jié)點的滾動位置查詢請求
• 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      // 節(jié)點的ID
      res.dataset // 節(jié)點的dataset
      res.scrollLeft // 節(jié)點的水平滾動位置
      res.scrollTop  // 節(jié)點的豎直滾動位置
 })

第四步：可一返回所有的節(jié)點信息

query.exec(function(res) { console.log(res) })

到了這里，關于微信小程序如何獲取元素節(jié)點信息？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！