document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) ....
因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下， 组件的 $refs 指向一个空对象 。
可以先在组件上加上 ref="名字" ，然后通过 this.$refs.名字 获取相应元素并进行操作。
<template>
<div class="box">
<h1 ref="divDom">这是一个测试样例</h1>
<button ref="but">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showThis(){
// h1的实例对象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到组件的实例之后，也可以调用组件上的 methods方法
this.$refs.but.click();
},
},
}
</script>在Vue3框架里面是解除了this这个对象，所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。
但是vue3中自带了能返回当前组件实例对象的函数 getCurrentInstance，通过该函数获取对象节能看到该对象包含界面中的refs。
<template>
<div ref="divDom"></div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
const divDom = ref(null);
onMounted(()=>{
console.log('获取dom元素',divDom)
})
// 获取页面的实例对象
const pageInstance = getCurrentInstance();
// 获取dom节点对象
const tagDomObj = pageInstance.refs.divDom;
</script>
