小程序怎么获取到一个元素

小程序怎么获取到一个元素.jpg" alt="小程序怎么获取到一个元素">

小程序开发中，经常需要通过获取一个 DOM 元素来修改它的属性、样式等。下面介绍几种获取 DOM 元素的方法。

通过id选择器获取

在 wxml 文件中，所有带有 id 属性的节点都会被编译成一个对象，并自动挂载到 Page 对象或 Component 实例上。因此，可以通过 Page 或 Component 实例直接访问这个对象，并通过它来获取该节点 DOM 对象。

Page({
  onLoad: function() {
    this.myDiv = this.selectComponent("#myDiv");
  }
})
  

在页面加载时，利用 selectComponent 方法获取 id 为 myDiv 的组件实例对象，就可以通过 this.myDiv 来访问该节点 DOM 对象了。

通过class选择器获取

通过 class 选择器获取 DOM 元素，在小程序开发中也是比较常用的方法。同样是使用 selectComponent 方法，并传入 class 选择器。

Page({
  onLoad: function() {
    this.myDivs = this.selectAllComponents(".myDiv");
  }
})
  

这里使用了 selectAllComponents 方法，它会返回匹配到的所有组件实例对象数组。

通过数据绑定获取

通过给 DOM 元素设置 data-* 属性，可以将数据与该元素绑定。然后，在小程序开发中就可以使用 WXML 中的模板语法来访问这个元素。

Click Me
  

Page({
  onTap: function(e) {
    var title = e.currentTarget.dataset.title;
    console.log(title); // 输出 "hello world"
  }
})
  

总结

在小程序开发中，常用的获取 DOM 元素的方法有以上三种。而在实际项目中，我们通常组合使用这些方法，才能更好地实现逻辑需求。

本文由武汉科技提供技术支持。