1 .原生js获取 DOM 节点
代码语言：javascript复制document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....2. vue2中获取当前组件的实例对象
因为每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下， 组件的 refs 指向一个空对象 。
可以先在组件上加上 ref="名字" ，然后通过 this.$refs.名字 获取相应元素并进行操作。
代码语言：javascript复制<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>3.vue3中获取当前组件的实例对象
1.创建 ref 变量，给组件或元素绑定 ref 属性值为该变量
2. 通过变量.value获取
代码语言：javascript复制<template>
<div ref="container"></div>
</template>
<script setup>
import { ref } from 'vue';
const container = ref(null);
onMounted(()=>{
console.log('获取dom元素',container.value)
})
</script> 
