Vue中获取DOM元素的方法方法使用$el$el是Vue实例的根DOM元素

作者：机器人技术佬 | 发布时间：2025-06-20 |

Vue中获取DOM元素的方法

在Vue中，获取DOM元素主要有三种方法：使用$refs、使用$el和通过原生JavaScript方法。根据不同的场景，我们可以选择最合适的方法。

一、使用$refs

使用$refs是获取DOM元素最常见的方式。$refs是一个对象，里面存储了所有通过ref属性引用的DOM元素或子组件。

  1. 在模板中添加ref属性：比如 <div ref="myDiv"></div>
  2. 在Vue实例中访问$refs：通过 this.$refs.myDiv 获取到DOM元素

这种方法简单直观，但只能在模板渲染完成后（如mounted生命周期钩子）才能访问。

二、使用$el

$el是Vue实例的根DOM元素。使用$el可以直接访问组件的根元素。

  1. 在模板中定义根元素：比如 <div id="app"></div>
  2. 在Vue实例中访问$el：通过 this.$el 获取到根元素

虽然$el可以访问根元素，但如果需要访问子元素，还是建议使用$refs。

三、通过原生JavaScript方法

在某些复杂场景下，可能需要使用原生JavaScript方法来获取DOM元素。

  1. 在模板中添加元素：比如 <div id="myDiv"></div>
  2. 在Vue实例中使用原生方法：通过 document.getElementById('myDiv') 或 document.querySelector('myDiv') 获取到DOM元素

这种方法灵活性高，适用于复杂场景，但代码可读性较低，需要手动管理。

四、不同方法的适用场景

方法 适用场景 优势 劣势
$refs 访问被ref引用的DOM元素或子组件 简单直观，适用于大多数场景 只能在模板渲染完成后访问
$el 访问Vue实例的根DOM元素 直接访问根元素 只能获取根元素，不能获取子元素
原生JavaScript 需要跨组件或跨实例获取DOM，复杂场景 灵活性高，适用范围广 代码可读性较低，需手动管理

五、实例说明

以下是一个示例，展示了如何在一个Vue组件中使用$refs、$el和原生JavaScript方法来获取DOM元素：