1 .原生js获取 DOM 节点:
1 2 3 4 |
document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) .... |
2. vue2中获取当前组件的实例对象:
因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下, 组件的 $refs 指向一个空对象 。
可以先在组件上加上 ref="名字" ,然后通过 this.$refs.名字 获取相应元素并进行操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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节点内容请搜索IT盛行!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。