uniapp怎么获取dom节点
更新时间：2023-07-28
前言：
uni-app是一款基于Vue.js开发的跨平台应用开发框架，可以同时开发出运行在H5、小程序、APP等多个平台的应用。在uni-app中，获取DOM节点是一项非常常见的操作，可以用于进行DOM元素的操作、属性修改、事件绑定等等。下面将介绍uni-app中如何获取DOM节点的方法。
一、通过id获取DOM节点
在uni-app中，可以通过特定的id属性值来获取对应的DOM节点。需要注意的是，在uni-app中，需要使用`this.$refs`来获取DOM节点。
例如，我们有一个`
`元素，其id为"myDiv"，我们想要获取这个DOM节点，可以使用如下代码：
在上述代码中，我们在`
`元素中添加了一个id属性，并在`
`的结束标签处添加了`ref`属性，并指定为"myDivRef"。在`mounted`生命周期钩子函数中，通过`this.$refs.myDivRef.$el`来获取这个DOM节点，并将其赋值给`divNode`变量。最后，将其打印到控制台中。
二、通过class获取DOM节点
除了通过id来获取DOM节点外，我们还可以通过class属性来获取对应的DOM节点。与通过id获取不同的是，通过class获取的是一个DOM节点的数组，因此我们需要注意处理。
在uni-app中，同样需要使用`this.$refs`来获取通过class获取的DOM节点。
例如，我们有一组`
`元素，其class为"myDivClass"，我们想获取这组DOM节点，可以使用如下代码：
在上述代码中，我们在每个`
`元素中添加了一个class属性，并在每个`
`的结束标签处添加了`ref`属性，并指定为"myDivRef"。在`mounted`生命周期钩子函数中，通过`this.$refs.myDivRef`来获取这组DOM节点，并将其赋值给`divNodes`变量。然后，通过循环遍历打印每个DOM节点到控制台中。
三、通过标签名获取DOM节点
在uni-app中，我们还可以直接通过标签名来获取DOM节点。同样地，也需要使用`this.$refs`来获取。
例如，我们想要获取所有的`
`元素，可以使用如下代码：
在上述代码中，我们在每个`
`元素中添加了`ref`属性，并指定为"myParagraphRef"。在`mounted`生命周期钩子函数中，通过`this.$refs.myParagraphRef`来获取这组DOM节点，并将其赋值给`pNodes`变量。然后，通过循环遍历打印每个DOM节点到控制台中。 总结： 通过上述方法，我们可以在uni-app中获取DOM节点。包括通过id、class、标签名等获取都是通过`this.$refs`来实现的。需要注意的是，通过class获取的是一个DOM节点的数组，需要进行处理。通过这些方法，我们可以方便地获取到DOM节点，以进行各种操作，满足应用开发的需求。
