uniapp 获取dom节点
时间: 2023-09-07 15:11:10 浏览: 77
在uniapp中,可以使用以下方法获取dom节点:
1. 通过id获取:
在模板中设置id,例如:
```
<view id="myView"></view>
```
然后在js中通过以下方式获取:
```
let myView = uni.createSelectorQuery().select('#myView')
```
2. 通过class获取:
在模板中设置class,例如:
```
<view class="myClass"></view>
```
然后在js中通过以下方式获取:
```
let myClass = uni.createSelectorQuery().selectAll('.myClass')
```
3. 通过标签名获取:
在模板中设置标签名,例如:
```
<view></view>
```
然后在js中通过以下方式获取:
```
let myView = uni.createSelectorQuery().select('view')
```
注意事项:
- 获取到的节点是一个对象,需要使用对应的方法来操作,例如设置样式可以使用`myView.styles({color: 'red'})`
- 如果要对多个节点进行操作,需要使用`selectAll`方法,获取到的是一个数组,需要进行遍历操作。例如:
```
let myClassList = uni.createSelectorQuery().selectAll('.myClass')
myClassList.forEach((myClass) => {
myClass.styles({color: 'red'})
})
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)