在 Vue 3 中，获取 DOM 的方式与 Vue 2 类似，但有一些变化。

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'

// 方法一，这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定
const formRef = ref(null)
console.log(formRef.value) // 这就获取到 DOM 了

// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })

// 方法三，比如在 ts 里，可以直接获取到组件类型
// 可以这样获取子组件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>

原生js获取 DOM 节点：

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  mounted() {
    const div = document.querySelector('div')
    console.log(div)
  }
}
</script>

注意，使用原生JavaScript方法可能会导致代码变得更加复杂，并且可能会破坏Vue的响应式机制。因此，在大多数情况下，最好使用Vue提供的方法来获取DOM元素。