前端获取节点方法总结

weixin_43900440

已于 2022-12-18 19:58:22 修改

阅读量1k

点赞数

分类专栏： uni-app 文章标签：前端 javascript 小程序

于 2022-12-18 12:06:09 首次发布

本文链接：https://blog.csdn.net/weixin_43900440/article/details/128360895

版权

uni-app 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

H5获取节点方法

<div id='id'></div>
document.getElementById('id')
<div class='className'></div>
document.getElementsByClassName('className')
<div></div>
document.getElementsByTagName('div')
<input name="input"/>
document.getElementsByName('input')
<div class='parent'>
  <div class='child'></div>
</div>
document.querySelector('.parent .child') // 可以使用复杂的选择器
<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
</div>
document.querySelectorAll('.parent .child')

uni-app获取节点

// 页面内获取内置组件:
1.方法一
<view class='className'></view>
uni.createSelectorQuery().select('.className')
<component ref='component' class='component' tt:ref="refHandler"></component>
提示: 使用in()方法使获取节点范围限制为某个自定义组件内(支付宝小程序不支持in())
      uni.createSelectorQuery().in(this.$refs.component)
      uni.createSelectorQuery().in(this.selectComponent('.component')) // 仅支持小程序
      refHandler(ref) => uni.createSelectorQuery().in(ref) // 仅字节小程序支持
2.方法二(仅H5支持)
<view ref='view'></view> 
this.$refs.view

// 自定义组件内获取内置组件:
this.createSelectorQuery().select()
this.createSelectorQuery().in(this) // 获取范围限制在本自定义组件内(支付宝小程序不支持in())
this.$refs.view // 仅H5

// 获取自定义组件
<component ref='component' class='component' tt:ref="refHandler"></component>
1.方法一
this.$refs.component
2.方法二
this.selectComponent('.component') // 仅小程序支持
3.方法三
Page 中监听refHandler(ref)方法 => ref为自定义组件对象 // 仅字节小程序支持