脚本宝典收集整理的这篇文章主要介绍了Vue3获取DOM节点的3种方式实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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>到此这篇关于Vue3获取DOM节点的3种方式的文章就介绍到这了,更多相关Vue3获取DOM节点内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue3获取DOM节点的3种方式实例全部内容，希望文章能够帮你解决Vue3获取DOM节点的3种方式实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。