位置: IT常识 - 正文
【Vue3】获取DOM节点的几种方式(vue3获取dom元素的方法)
编辑：rootadmin【Vue3】获取DOM节点的几种方式 1 .原生js获取 DOM 节点：document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2. vue2中获取当前组件的实例对象：
本文链接地址:https://www.jiuchutong.com/zhishi/298346.html
转载请保留说明！
推荐整理分享【Vue3】获取DOM节点的几种方式(vue3获取dom元素的方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue获取dom元素的属性,vue 获取dom,vue3.0 获取dom,vue获取dom元素的属性,vue获取dom元素的属性,vue3.0 获取dom,vue3获取dom元素宽高,vue3 获取dom,内容如对您有帮助，希望把文章链接给更多的朋友！
因为每个 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>3.vue3中获取当前组件的实例对象：在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>上一篇：Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（项目演示、涉及知识点、源码分享）(vue实例完整项目源码)
下一篇：“export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘报错分析(defaultpool)
